Google Chrome Developer Tools - The Chromium Projects

http://www.chromium.org/devtools

The Chromium Projects

Home Chromium Chromium OS

Google Chrome Developer Tools

For an overview see http://code.google.com/chrome/devtools. How to contribute to the DevTools: http://code.google.com /chrome/devtools/docs/contributing.html

Quick links
Report bugs Discuss

Other sites
Chromium Blog Google Chrome Extensions Google Chrome Frame
Except as otherwise noted, the content of this page is licensed under a Creative Commons Attribution 2.5 license, and examples are licensed under the BSD License. The Chromium OS designs and code are preliminary. Expect them to evolve.

A new "How to contribute to the DevTools"

We are trying to clarify and expand the documentation for contributing to and extending the Developer Tools. Please post feedback to the newsgroup. Three factors make developing on the DevTools system complex: 1. The Chrome browser builds on WebKit which has the source for DevTools, and 2. The DevTools operate as a client/server system, the front-end (client) and back-end (server) must match in version number and the front-end itself can be packaged inside or outside of the browser. 3. The front-end can be packed into one file or unpacked as a directory of files. To modify the DevTools you will want to work with unpacked front-end source and you need a back-end that matches in version number. Here are three different setups depending on your goals:

1. Using a Chromium Continuous Build

Here we use recent complete browser build. You can contribute small patches or do your own thing with this setup. In this setup we ensure the version numbers match by grabbing both a back-end and an unpacked front-end from a recent build.

1. Pick your operating system in the Continuous Build index, 2. At the bottom of each OS page is a file LAST_CHANGE containing the directory number of last successful build, 3. Open the corresponding directory from the OS page, 4. Save and unzip the chrome*.zip file, this will be your development browser. 5. Save and unzip the devtools-frontend.zip file. This directory will be your unpacked DevTools source for the front end. 6. Run your back-end copy of Chrome with command line flag --debugdevtools-frontend=<full path to your unzipped devtoolsfrontend>. 7. See Debugging Custom DevTools in Chrome below

Or, 2. Using Full Browser Source.

Here we build the browser from source. This is the solution that the DevTools team at Google uses and thus patches based on this setup can be complex and can be reviewed and accepted more easily. Use this setup for change to the back end code or to coordinate changes in the front and back (eg for changes to the communications protocol). In this set up we ensure the version numbers match by building Chrome from source. 1. Set up for building a "debug" (non-packed) version of DevTools front-end:

1 of 2

07-11-2011 18:40

Google Chrome Developer Tools - The Chromium Projects

http://www.chromium.org/devtools

1. Create ~/.gyp/include.gypi with the following contents: { 'variables': { 'debug_devtools': 1, }, } 2. Run gclient runhooks --force to recreate project files 2. Build a Chrome browser. There are lots of steps so take your time. Aim for a "Release" build, that will be faster both to build and to use. Once you succeed, you can rebuild with "Debug" if you need to change back end code. To double check that you succeeded, find the file DevTools.js. The unpacked build will have a small version of this file, the packed version is around 1.2MB. The directory containing DevTools.js will be your DevTools directory. 3. You can run Chrome with no additional flags and the debug front-end files will be used. 4. See Debugging Custom DevTools in Chrome below

Debugging Custom DevTools in Chrome

Once you have your build ready, you can run and debug your modified DevTools. You can do this one of three ways:

1. In-Browser debugging. Simply invoke DevTools on DevTools for debugging. This approach is easy but it means that you will be using your modified copy of DevTools to debug you modified copy of DevTools. Beware ;-). 2. Or, use remote debugging to debug DevTools in another copy of Chrome. This is the preferred way of debugging the DevTools. It uses two copies of Chrome, one with your modified DevTools and one with the unmodified Tools. Create a new directory to be your Chrome profile for remote copy of the browser, for example remote/chromeProfile. Run remote copy of Chrome with --userdata-dir=<remote profile> --remote-debuggingport=9222. From your regular (near) Chrome instance, open url http://localhost:9222 and choose any tab to debug. The web page with front-end will be pulled out of the remote copy as from server and it will then connect back to the server to debug it. This approach allows your modified code to be debugged with the Developer Tools in your 'near' copy of Chrome. 3. Or, Run the modified Developer Tools as a Web App. Here we again use two copies of the Developer Tools, one built into the browser and one running in a Web page. Under Construction.

Testing Your Custom Developer Tools

After you have completed your preliminary development and have modified Developer Tools, its time for regression testing. Developer Tools are tested using layout tests (standard WebKit testing harness). You'll need to build browser from source and run layout tests under inspector/, http/tests/inspector and http/tests /inspector-enabled. See http://www.chromium.org/developers/testing/webkitlayout-tests for more details. Since Developer Tools are part of WebKit, you can also build WebKit and run tests there: http://www.webkit.org/quality/testing.html

Submitting a patch
To submit a patch over Developer Tools, use issue tracker at http://crbug.com/new; please also mention "DevTools" in the bug summary. If you know for sure that the bug or a feature should be implemented as a part of WebKit Web Inspector, please submit it at http://webkit.org/new-inspector-bug.

Sign in | Recent Site Activity | Terms | Report Abuse | Print page | Powered by Google Sites

2 of 2

07-11-2011 18:40