Google Chrome tools has some power features similar to Firebug. Each one has its pro’s and con’s. You can get used to any tool if you work in it long enough. If you comfortable in Firefox, there isn’t a huge reason to change. However, you should be fluent in both browsers.
You start Google Dev Tools by starting the browser then using the menu to access Developer Tools. Tools =>Developer Tools
The debugger will display at the bottom of your browser. You may detach it in its own window so you could work with the web page without any interference from the Google Dev Tools. This is referred to undocking.
You may then inspect the page by its DOM. This window allows you to move elements around the page by drag and drop. In addition, you can click on the magnifying glass to put the debugger into inspector mode and hover over anywhere on the page to preview the css and tags in a tooltip that make up what your looking at. When you click, the Google Dev Tools takes you directly to the markup in the Elements tab.
Some other features are creating attributes such as class or style inline. You may also edit text and remove elements. I like Google’s way of doing this because when you edit text is free form. For example, you can type in style=”font-size:10px”. In firebug, you have to type in style first, then hit enter, then type in everything after the ‘=’ sign without quotes.
The styles panel shows you where style rules come from. Starting with the most specific first. You can turn on and off a style by using the check boxes next to the style. You can also add new classes. Keep in mind these changes are not persisted to disk. After a refresh all your changes are gone.
Another cool feature Google Dev Tools has is setting a cursor state such as :hover, :visited, :active, :focus to style the element during one of these states. A nice color picker similar to what you use in Photoshop is also included. You may edit the style panel in free form also by double clicking in it.
The style editor also provides a nice CSS3 type ahead feature.
The console panel is a log and a command line interpreter. You may send messages to the log with console.log(“this is a message”);
The Console object has different types of output. You may use the .warn() and .assert() methods when testing. Check out Google’s Console API
The Console comes with helper methods. Instead of calling document.querySelector(‘#title’) or you can call $(‘#title’). The $ is referred to as the “bling”. JQuery will overwrite the built in ‘bling’. One cool thing you can do is call inspect($(‘#title’)); and the node will be selected in the Elements Panel.
This panel provides a editor with line numbers in addition to change history. Sometimes you may want to revert your changes, with Google Dev Tools, you can easily recover negative changes. When your happy with the you mockup. You can save your changes. These changes are stored in your browsers local storage.
more is coming…