Professional Documents
Culture Documents
Google Chrome Developer Tools - The Chromium Projects
Google Chrome Developer Tools - The Chromium Projects
http://www.chromium.org/devtools
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.
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
1 of 2
07-11-2011 18:40
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
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.
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