Here are 5 quick tips for the Chrome Web Console: The console has a very nice API, specially for webkit based browsers like Chrome. When the function is about to be executed, the debugger will be invoked, and you step through the lines one by one, by clicking the “Step over next function call” button.ĭuring this, all the variables accessible on that line would be accessible from the console, and would also be listed in the Scope Variables section on the right sidebar. You can’t do that directly, since it is not available in the global scope, but you can do this by adding a break-point at the function declaration. So, say you want to inspect a variable defined in the function. When that line is about to be executed, script execution will be paused.įor ease of use, you can hit the Esc key to toggle the split console drawer, which allows you to see the console (and some other tabs) together with any of the main tabs. By clicking on a line number, you can add a breakpoint for that line of the script open in the file area. The sidebar on the right is for JavaScript inspection. Clicking on any one will open that resource in the File Area. The sidebar shows the directory listing of all the static resources loaded for the webpage presently open. Explaining each and every function of this tab is not possible in one article, but here is an overview. This is probably the most powerful place in the developer tools.