apaas.dev
30 May 2022
SEO Title
Chrome DevTools 生态系统中很棒的工具和资源
Contents
- Learning
- DevTools tooling and ecosystem
- Chrome DevTools Protocol
- Using DevTools frontend with other platforms
- DevTools Extensions
Learning
- Dev Tips - Large collection of tips as animated gifs.
- DevTools Snippets - Collection of snippets.
Multiuser DevTools
- DevTools Remote - Remotely debug someone else's browser.
DevTools tooling and ecosystem
Object formatting
- immutable-devtools - Custom formatter for Immutable-js values.
Network Inspection
- betwixt - System level network proxy, providing inspection via Network panel.
- Weer - A HTTP protocol debugger (closed source)
CPU profile
- call-trace - Can instrument your JS with hooks, and then generate a
.cpuprofile
of the of the complete (non-sampled) execution. View either time or call counts. - cpuprofilify - Converts output of various profiling/sampling tools to the
.cpuprofile
format. - Wishbone python framework - Profiling data can export as
.cpuprofile
.
Multimedia
- snapline - Converts timeline screenshots to gif.
Timeline, Tracing & Profiling
- DevTools Timeline Viewer - Share URLs of your timeline recordings.
Chrome Debugger integration with Editors
- VS Code - Debugger for Chrome - Breakpoint debugging in VS Code.
- VS Code - Elements for Microsoft Edge - Elements panel inside VS Code.
- ChromeREPL - Within Sublime Text, use the Chrome console.
- Sublime Web Inspector - JavaScript Breakpoint debugging right in Sublime Text.
- WebStorm/JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.
Chrome DevTools Protocol
- ChromeDevTools/devtools-protocol - Canonical location of the protocol JSON. Issue tracker for protocol bugs. TypeScript types.
- DevTools Protocol API Docs - Easy browsable UI for exploring the protocol's domains, methods and events.
Developing with the protocol
- chrome-remote-interface Wiki - Many useful recipes.
- Chrome Protocol Proxy - Tool for debugging clients using devtools protocol.
- Remote Debug Gateway - Allows you to connect a client to multiple browsers at once.
- DevTools Backend - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
- RemoteDebug - Initiative to normalize debugging protocols across today's browsers.
- ChromeDriver - The official Selenium/WebDriver implementation for Chrome is implemented on top of the DevTools Protocol.
- BrowserGap Community Edition - A remote browser product, open sourced. Makes heavy use of the raw, tip-of-tree Chrome DevTools protocol.
Automation
- Puppeteer - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol.
- Python port: pyppeteer
- Rust port: Rust Headless Chrome
- .NET port: Puppeteer Sharp
- Ruby port: Ferrum
- headless-devtools - Puppeteer plugin to get CSS Coverage or JS Heap snapshot.
- PuPHPeteer - PHP-bridge to control Puppeteer using PHP.
- Playwright - Node.js library to automate Chromium, Firefox and WebKit with a single API.
- Taiko - A Node.js module to automate the Chrome/Chromium using DevTools protocol.
- cuic - Clojure library providing a high-level API for UI test automation over the DevTools Protocol.
- Also all
Protocol Driver Libraries
below
Protocol Driver Libraries
- JavaScript/Node.js: chrome-remote-interface - The most-used JavaScript API for the protocol
- TypeScript/Node.js: chrome-debugging-client
- Java: chrome-devtools-java-client
- Java: karate - Web-service testing framework with a Java API to automate Chrome
- Java: jvppeteer - Headless Chrome For Java
- Python: PyCDP - Pure-Python, sans-IO wrappers. See also the Trio CDP driver
- Python: chromewhip - drop-in replacement for the
splash
service - Python: pychrome - low level CDP transport handler
- Python: ChromeController - high-level browser mgmt
- Go: chromedp - High-level actions and tasks for driving browsers
- Go: cdp
- Go: gcd
- Go: godet
- Go: Rod
- C#/dotnet: chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
- Ruby: Cuprite - Capybara driver
- Ruby: ChromeRemote
- Kotlin: chrome-reactive-kotlin - reactive (rxjava 2.x), low-level client library in Kotlin
- Kotlin: chrome-devtools-kotlin - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
- Clojure: clj-chrome-devtools - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
- PHP: chrome-devtools-protocol - A PHP client library for the protocol.
Browser Adapters
- Remote Debug Firefox adapter - Translates Firefox's devtools protocol to the CDP.
- ios-webkit-debug-proxy - Exposes Mobile Safari & UIWebView instances via the CDP.
- Remote Debug iOS WebKit adapter - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
- IE Diagnostics Adapter - Protocol adaptor for Microsoft IE 11 to CDP.
Using DevTools frontend with other platforms
Android
- Facebook Stetho - Native Android debugging with Chrome DevTools.
- j2v8-debugger - Debugging JavaScript running in J2V8 with Chrome DevTools.
ClojureScript
- Dirac - Debugging of ClojsureScript.
Lua
- Mare - Lua debugging with Chrome DevTools.
iOS
- PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools.
Go
Node.js
- ndb - An improved Node.js debugging experience with the DevTools Frontend.
- Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+.
- thetool - CPU, memory, coverage, type profiling with Node.
- chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.
DevTools Extensions
Accessibility (A11y)
- Chromelens - See how your web app will look to people with different types of vision and the path users will travel when tabbing through your page.
Workflow
- Clockwork - View PHP application profiling data.
- Emulated Device Lab - Experiment with multiple devices being emulated at the same time.
- RailsPanel - View Ruby on Rails application profiling data.
- React Developer Tools - Inspect the React component hierarchies.
- EmberJS Inspector - Allows you to inspect EmberJS objects in your application.
- VueJS Developer Tools - Inspect VueJS components and manipulate their data.
- Angular Batarang - Inspect an Angular application's scope and profile its data.
- Augury - Debugging and Profiling for Angular 2 applications.
- Marionette Inspector - Inspect a Marionette application's views, events, and live data.
- Backbone Debugger - Inspect a Backbone application's views, models, events, and routes.
- App Inspector for Sencha - Inspect a Sencha ExtJS/Touch application's component tree, data stores, events, and layouts.
- Redux Devtools - Inspect Redux with actions history, undo and replay.
- Three.js - Edit any three.js project.
- Insight - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
- BEM devtools - Inspect BEM entities expressed in
i-bem
framework. - Metal.js Developer Tools - Inspect the Metal component hierarchies.
Themes
- DevTools Author - A selection of themes to modify parts of DevTools related to authoring web applications.
- Zero Dark Matrix - Dark theme for Chrome Developer Tools.
- Material UI Theme - Provides various Material Design inspired themes.
Performance
- sloth - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
- TracerBench - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.
Automation
- Puppeteer IDE - Standalone Puppeteer playground in browser's developer tools.
原文:https://github.com/ChromeDevTools/awesome-chrome-devtools
- 登录 发表评论