Browser Dev Tools

sublimetext.com

The Browser

This information is slanted towards the Chrome browser, however Firefox and Chrome have almost identical tools with only a few meaningful differences between them. If the shortcuts don't work for you, simply look in your browser menu. The commands and information are all there!

This piece of software reads documents received from the internet. It displays them to you by interpretting HTML and Javascript.

Open your browser console:

• Shift + Ctrl + i (chrome)
• Shift + Ctrl + j (firefox)
• Safari: Advanced > Preferences > "Show develop menu in menu bar"
• Tools > Developer Tools
• Right-click the page and select "Inspect Element"

This is all you need to edit your web pages!

Elements Tab

This displays the HTML page.

When you "Inspect Element" you tell the browser to open the dev tools and show you the mark-up for the element you clicked on. However, you can continue to navigate to other elements of the page while it's open and also use the console.

Hover over the different page elements and notice how they are highlighted on the page and in the code. Click the element shows you the styling for it.

Networking Tab

This displays request and response data.

When you enter a webpage url (the address to the computer you whose files you want to view), you're sending a request. When the page displays you're receiving the response. This tab shows you how long these trips take, how large the files and the headers.

Headers basically report document status. Did it load? Did it send an error? Did it not log you in? You can find out in this tab.

Sources Tab

This will display all current sources loaded into the browser. That includes YOUR files (if you open an HTML file in the browser) and the files required to load other webpages. This information is useful if you want to browse the source.

Resources Tab

Here you can find information about cookies and sessions for the current webpage.

• Sessions: Temporary storage of data required for viewing the current page. If you close the page, the session ends and the data is lost.
• Storage: Long term storage. The data here will not be removed when you close the browser. It remains until it expires (which is set by the author of the webpage).

The important thing to note about these two features is that they are stored in your browser. For that reason, they're not very robust but more utilitarian and practical measures for storing user data. When you design your pages, you can also set up resources to make user browsing more dynamic.

Console Tab

This console allows you to type javascript right into the browser. With it you can fiddle with the data contained in the webpage -- and alter it. It's a tool for research, prototyping and testing page behavior.

However, you can type plain ole javascript into it as well. Need a calculator? Just type your equations into the console. Test out a function? Gladly. The alternative to the browser console is your computer terminal (or Commandline Interface (CLI)). There you'd have installed a tool like Nodejs which allows you to access a similar console.