Chrome DevTools

Chrome is fast. 

And DevTools are powerful.

So, makes a great combination for debugging HTML / CSS. Launch it by going to the Hotdog menu > Tools > Developer Tools or Alt Cmd I.

Switch between tools with the keyboard shortcuts: Cmd [ (left) or Cmd ] (right). 

These tools are:

1. Elements: inspect and edit the DOM tree

2. Resources: inspect resources in the page. e.g. HTML 5 Database, Local Storage, Cookies, AppCache, etc.

3. Network: inspects network resources in real time.

4. Sources: debug JavaScript

5. Timeline: time spent loading or using the web page

6. Profiles: profile execution time and memory usage of a web page

7. Audits: analyze a page as it loads and provide suggestions / optimisations for decreasing load time

8. Console: the JavaScript Console lets you log diagnostic information and offers a shell prompt

Leave a Reply

Your email address will not be published. Required fields are marked *