Learn Chrome DevTool by questions

- 7 mins

Element Panel

1) Is there any faster way to inspect an element?

Normally people would right click element and select Inspect Element, or use the Inspect Element Button to go into Inspect Element Mode. But for developers, clicking things here and there with mouses is not efficient, so you can use shortcut cmd+shift+c to directly go into inspect element mode. Additionally, if it is not easy to find one specific element on a complex page, you can use inspect() in Console.

2) Is it possible to update element’s box model parameters?

At the bottom of Styles panel, there is a visualization of element’s box model, and the parameters(especially the content box size) is editable.

3) How to update CSS property value faster?

The chances are high that you need to manually update CSS property values in dev tool to see how the style looks like, instead of randomly guess some number, you can use several shortcut to update the value faster:

4) If I am editing DOM attributes frequently, how can I switch attribute values faster?

Once the edit mode is active(by double-click on the attribute name or value, or press enter), you can cycle through attribute values by pressing Tab.

5) DOM breakpoints use cases?

DOM breakpoints can be very helpful while debugging your JavaScript, it includes subtree change, attribute change, node removal, which will go into breakpoint if any of those change happens. All DOM breakpoints are logged under the DOM breakpoints panel.

6) Useful keyboard shortcuts in Element Panel?

7) Any other tips for Style Panel?

Source Panel

1) What kinds of breakpoints are available in dev tool?

In addition to DOM breakpoints mentioned above, in chrome dev tool, you can also add JavaScript breakpoint, XHR breakpoints, event listener breakpoint.

2) How to make the most out of breakpoints?

Breakpoints are essential when it comes to debugging. By stepping through the code, you can observe changes and understand what is going on, besides you can modify values and even the scripts while debugging.

It is also feasible to change value in console, or change scripts in the source file, which is really helpful to experiment different debug solutions.

3) Work Spaces

Work spaces is similar to a chrome plugin called ‘live style’, which should be used with Sublime, basically anything you changed in dev tool editor is instantly saved in local files. Details can be found in this talk and official docs.

4) Run Snippets

Running custom snippets in dev tool is available in source panel > snippets, you can add some frequently used scripts here, there is a list of devtool-snippets for reference.

5) Useful Keyboard Shortcuts

Since you are going to step through code, it involves lots of clicking, using shortcuts is more convenient. The complete shortcuts list is here, but I am just gonna put a few common ones (personal preference) down here:

Console Panel

1) There seems to be multiple ways to activate console panel?

Console is frequently used in dev tool, I suppose that’s why you can invoke the console panel in many ways (besides: chrome canary just changed the position of console panel this month to second, yay).

2) Can I keep logs between pages and page refreshes in console?

It’s pretty simple, just check the preserve log in console panel, then console will persist the log history.

If there are too many log info in the console, use cmd+k to clear the logs.

3) Using console.log() to diagnose is tedious, can I group or highlight log info in console?

Lastly, you can add console.assert() to conditionally display an error string:
console.assert(list.childNodes.length < 500, "Node count is > 500");.

4) I tried to print a data object, but I have to expand them to see the actual data, is there a preview of the data object in console?

When diagnose data object, console.table() is a life saver, not only it will display object data in a table, but also it provides a feature of logging specific properties by the second parameter, such as console.table(family, ["firstName", "lastName", "age"]).

However, as far as I can tell, if the value of one key is an array, the array won’t be expanded whatsoever.

5) I understand that I can write some JavaScript code to calculate time lapse of code execution, is there any quicker way to achieve this?

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

Beyond that, if a timeline recording is in progress during a time() operation, the result will also be available in timeline graph.

6) I would like to distinguish each log the code prints, can I add styles on logs?

You can use the format specifier to colorize output strings:

console.log('%cheight'+$(".header").height(),'color:orange')

The complete console api list is here.

There are other sections in dev tool, such as Timeline, Network, Profile, these will be addressed in another blog(hopefully).

Links

comments powered by Disqus
rss facebook twitter github youtube mail spotify instagram linkedin google pinterest medium vimeo stackoverflow codepen