Tutorials

2012.11.07 - YouTube - Google Developers - Wait, Chrome Dev Tools could do THAT?
- Matt said he found this video really interesting / helpful and was able to use what he learned from it to speed up SF's site quite a lot.
- Summary:
  - You can drag elements around in the elements view.
  - If you have an element selected in the elements view, you can type $0 in the console to view the element.
    - IDK what the benefit of that is. [From Matt: It gives you a direct reference to a specific DOM element that you can manipulate via console commands. It's very useful for things like checking attached event handlers, or checking/setting any other attribute.]
  - You can right-click an element and set a break when the element is modified.
  - Settings:
    - Set 'disable cache' so that whenever you have the devtools open it'll disable the cache. This way you don't have to worry about caching messing with what you're seeing, and you also get a more-accurate idea of the initial load time (I guess?).
    - 'LogXMLHTTPRequests' will send any ajax request responses directly to the console, to make it easier than searching through the network tab.
    - Color format: At the time the video was created, the devtools tended to convert colors to RGB when displaying them. This setting lets you keep them as authored, or force a particular style (HEX, HSL).
  - Network:
    - Size - At the time the video was created, the 'Size' column would show two values: the size transferred, and the total size of the file (after being unzipped with gzip). He suggests using this column to determine if a particular resource isn't being properly compressed.
    - Time - The two numbers here are: total time to get the entire resource, and time until the first byte of the resource had arrived.
    - Timeline - You can click the header and sort the timeline by different metrics of how the resources are loading.
    - Initiator - If you put your resources in the html, the browser can be very smart about loading them as quickly as possible. But if you have them loaded from a script (JavaScript, for example), you first need to wait for the script to download and execute before you can even query for those other resources.
    - ~10:07-12:00 - He goes through a simple example of analyzing a page to see what's going on.
    - ~12:00 - He explains that the browser is optimized to help your website load faster, and that the slowest way to load things is to have javascript load things.
    - 14:00 - Websockets
    - 15:00 - HAR format ('HTTP Archive Format') - These contain all of the metadata that you see in the network tab. You can save these files, send them to a coworker, then go to ericduran.github.com/chromeHAR/ and drag the file in there and it'll show the entire waterfall. He recorded another 1-hr video that describes all the things you can do with the HAR files.
  - Frames View / Displaying the page / Rendering:
    - 17:30 -
    - 17:44 - He says there are basically two aspects: the DOM, and the styling.
    - 18:30 - The goal is to create a smooth experience; the goal is 60fps.
    - 19:00 - He shows the 'Show paint rectangles' option in the settings. This shows boxes every time a part of the webpage needs to be repainted, eg if you hover over a link. Your goal should be to make these boxes as small as possible, b/c it'll reduce the CPU load of the page.
    - 20:50 - You can go into the 'frames' view and see how much time each frame took to render. He shows a sample webpage that demonstrates the effect of skipped frames on an animation that's playing in the browser.
    - 22:50 - If you have a chunk of work that doesn't fit into a single frame: 1) push it into a webworker, or 2) split up the work
    - 23:30 - He shows another example that shows what happens when you have too much work being done per frame.
    - 25:30 - If nothing else, try to run at a consistent framerate. Users will notice changes more than a consistently-slower framerate.
    - 26:00 - You can import or export this data.
  - JavaScript: (27:00)
    - A common problem is memory leaks. Try using the Heap snapshots view (in the profiles tab). You can create a snapshot at one point in time, and then another snapshot at another point in time, and then do a diff of them, and see stats on how many objects were created, how many were deleted, and which ones were not deleted. So you can basically use this to find your memory leaks.
    - Another common problem is creating extra DOM elements. You can use the same process to identify these leaks.
    - 29:50 - Audits tab - You can use this to get some easy suggestions for things you can do to speed up your page. Examples: unused CSS rules, uncached files.31:30 - Install PageSpeed Insights on the Chrome extensions store to get more recommendations for how to improve the performance of a page. Also, for a bunch of its recommendations it actually gives you the optimized version so you can just copy-paste it into your repo. For example, it gives you optimized versions of the images you're using.

Shortcuts

Network tab
- Ctrl+F to search for a particular request, if you know its name.

Chrome Devtools

Related pages

Tutorials

Shortcuts