Elements

DOM Manipulation

To select element, can right-click > Select Element or click magnifying glass icon, then left click element.

To live edit DOM, double click element or right click element to add attributes etc. Can hit delete to delete, or drag element around.

Updating Styles

Displays CSS rules for active element
Enables/disables properties
Edit rules for pseudo-classes
Link directly to CSS source

Plus + icon to add a new style, add pseudo-classes, animations.

Click the source file on right to view where the css is sourced from.

Sources

Editing the source tab

Can edit source files directly in sources panel. Can export to disc, and see revision history.

Clicking a file will bring up the file in sources panel.

Command+S will save changes to browser storage, not source files. Save As to overwrite local source file.

Right-click > Local Modifications will show version history.

Console

Working with the console

Console tab is part log, part command line interface.
Interact with app views and scripts
Run javascript commands
View log output

console.assert(1 === 2); // will throw assertion error in console.

Examining Exceptions

After error, clicking triangle will expand stack trace of error. Clicking on the file on the right will bring the file open in the sources panel.

Element Selector Shortcuts

Bling shortcut to select elements $: (console $ will be overriden by JQuery $ if imported.)
$('title') instead of document.querySelector('title').

These can be passed to inspect method to bring up in elements panel: inspect($('title')[0]).

Console will keep history of selections. Most recent at $0, then $1 and so on.

Debugging

Pause on Exceptions

By clicking Pause button, code will pause immediately prior to exception. To see value of the variable, can hover over variable to see value. Can also click twice to pause on uncaught exceptions.

{} Pretty print mode to see code as more readable.

Clicking on margin will create breakpoint.

Local Storage

Local storage located in Resources tab.

Network

Timelines panel helps to show bottle necks in loading scripts, css and assets from network.

Holding down shift key, then pressing reload with panel open will show a completely fresh timeline (without using cached 304 versions).

Can obtain a fresh cache by using Incognito window, or from Settings (gear icon) > Disable Cache.

In timeline:
- the translucent bar shows latency of request (how long from the start of asking for resource to when begins downloading)
- rest shows how long when browser started and finished downloading resource
- endpoint is when all data from the request is received.

Color is by file type: HTML in blue, JavaScripts in orange, CSS in green, Images purple.

Indicator is line in file where resource indicated as required.
Line at end of waterfall is when DOMContentLoaded event fired. DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Red line is when completely finished downloading.

Network Performance

Google PageSpeed Insights

Serving Correctly Sized images

Should download an image at the size it will be displayed.

jpeg good for photograph, whereas png better for icons with large areas of similar colour.

Profiles

Rendering Performance

Sometimes problems aren't network, rather slow code running on browser. To optimise that, can use the frames view and the CPU profiler.

Frames, Play by Play

Frames are the number of images that gets rendered on the screen per second. 30fps, is 30 different images drawn on screen per second.

Browser has a frame rate, that can be slowed down by HTML loading, JavaScript execution, style rendering, and painting rendered page to screen.

Frames view profiles when and where frame view is starting to suffer.

Time spent on scripting is in yellow, rendering in purple, and painting in green.

To narrow search, can use the CPU profiler.

CPU Profiles

Profiles tab, collect JavaScript CPU profile.

Timeline can quickly alert to performance problems, and CPU profiler can help you track down where JavaScript code is happening.

Memory

Memory Leaks

Application takes up more and more memory on computer, to point where slows everything down or crashes.

Heap Snapshots

Take a snapshot of the JavaScript objects in memory, to get an idea of where leak coming from.