Chrome Development Tools integrates DevTools and Chrome

Integrate DevTools

Chrome DevTools is scalable. S o if DevTools lacks the features you need, you can find an existing plug-in or write an extension yourself. Or you can integrate developer tool features into your application.

There are two basic ways to build a custom solution using DevTools:

• DevTools Extension (Developer Tool Extension). A Chrome plug-in that plugs in DevTools to add his features and extend its UI.
• Debug protocol clients. A third-party app that uses Chrome's remote debugging protocol to insert into low-version debugging supported by Chrome.

The following sections discuss both approaches.

DevTools Chrome plug-in

DevTools UI is a web app embedded in Chrome. T he DevTools plug-in (extension) uses the Chrome Extension system to add functionality to DevTools. A DevTools plug-in can add a new panel to DevTools, a new pane to the Elements and Sources panel sidebars, resources and network events can be checked, and JavaScript expressions can also be evaluated in the browser tab being checked.

If you want to develop a DevTools plug-in:

• If you haven't developed a Chrome plug-in before, see the Chrome plug-in (extension) for a full view
• To create a Chrome DevTools plug-in, see Extended DevTools

A series of examples of DevTools plug-ins, see DevTools plug-in instances that contain many open source plug-ins for reference.

Protocol debug client

Many third-party applications, such as IDE (Integrated Development Environment), editors, continuous integration tools, and test frameworks, can be integrated with Chrome debuggers to debug code, preview code in real time, change CSS styles, and control the browser. The client uses the Chrome debug protocol to communicate with another Chrome instance that can run on the same or remote system.

Note: Currently, the Chrome debug protocol supports only one client per page. So, you can use DevTools to check a page, or use a third-party client, but not at the same time.

There are two ways to integrate debugging protocols:

• Apps running on Chrome, such as web-based IDEs, can create a Chrome extension using the debugger module chrome.debugger. T his module allows the plug-in to communicate directly with the debugger, bypassing the Devtools UI. For more information, see Using the debugger extender API
• Other applications can use wireless protocols to connect directly to the debugger. This protocol includes exchanging information about the JSON data format over a WebSocket (network socket) connection.