Try Chrome Developer Tools Enhancement - Scope Varibles section

In this blog entry I talked about enhancing the Scope Variables section of Chrome Developer tools. If you want to try the enhancement yourself you can easily do so by following this procedure:

• Download and install Chrome Canary. My changes are compatible with Chrome canary only.
• Configure its launch with following parameters:

chrome.exe --remote-debugging-port=9222 --remote-debugging-frontend="http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html"

The

--remote-debugging-frontend="http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html"

parameter basically tells the Chrome debugger back-end to use the Developer Tools located at:

http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html

which is where I have put my modified code for developer tools.

UPDATE: It appears that the runtime flag `—remote-debugging-frontend` was recently removed. Instead, custom frontend url needs to be specified after a pound sign in address of remote debugging server when connecting to the server running at 9222 due to the flag -remote-debugging-port=9222. Instead of navigating to “localhost:9222", go to “localhost:9222#http://localhost:8088/front_end/inspector.html?experiments=true”.

So the new invocation should look like this:

chrome.exe --remote-debugging-port=9222 --no-first-run --user-data-dir=C:\devtoolsprofile

• Launch the page you want to debug in one tab

• Launch another tab with the following URL

http://localhost:9222

UPDATE:

http://localhost:9222#http://localhost:8088/front_end/inspector.html?experiments=true

• Select the page you want to debug in the grid that is shown - in my case it is test.html from above

• Set breakpoints and run the action in page to be debugged that will cause the break point to be hit. Try out my enhancement to the Scope Variable section. The enhancement is to highlight the scope variables that are new or changed their value since the last time the debugee was suspended.

Please provide feedback.

Here is a simple packaged app that wraps Developer Tools:

If you are interested you can download it here.

Enjoy!