Google Chrome Developer Tools: Getting started

In this video, I will explain how to get started
with Google Chrome’s Developer Tools. Developer tools in Google Chrome build on
a joint effort in the Webkit project. Developers who have used the Webkit Inspector
will find these tools familiar. You can start interacting with the developer
tools in the following ways. First Select “Developer”, “Developer Tools”
in the Page menu or Right-click on any page element and select
“Inspect Element” The developer tools window organizes information
into task-oriented groups, represented by icons in the top of the window.
The icons are named after the fundamental items you work with in each respective panel.
While these task-oriented tools provide a user friendly way to inspect the content of
any page, the interactive console can also be used for multiple tasks such as inspecting
the DOM, debugging JavaScript or analyzing HTML parse errors.
To bring up the console just press the toggle button that you can find in the lower left
corner of the status bar. Or you can press “escape”.
You can find error and warning counts in the bottom right corner of the status bar.
Clicking on these will also open the console. As you type, the console will provide you
with suggestions for objects and property names.
If there are multiple properties with the same prefix, pressing the Tab key will cycle
through them. Pressing the right arrow key will accept the
current suggestion. To learn more about Google Chrome’s developer
tools visit

Be the first to comment

Leave a Reply

Your email address will not be published.