Elements

• Check CSS (SCSS).

• Pick color even on a image using Color picker.

• use the color picker as converter (RGB, hex)

• Modify the html markup directly, use drag and draw to reorganize the DOM.

• Right click on the element to fix the focus effect.

Console

• Check log from JS.

• Test JS code snippet.

Source

In this tab, we could make sure if specific CSS，JS is loaded and check the source code, for the minified version, we could click {} Pretty Print button to see the raw version, that’s handy for debug.

Network

• Use Throttling to simulate the mobile network.

• Use filter tab to filter the request type: XHR, JS. Then use Headers, Timing tab to view the detail.

Timeline

In this tab, we could check request history, to know the loading time, sequence and so on. But the recorder is needed to enable manually.

Resources

In this tab, we could check Local Storage，Cookie, Session.