how to use developer tools in chrome.

*this is a guide that was created from lecture videos and is used to help you gain an understanding of how to use developer tools in chrome.

Open Developer Tools- View tab -> Developer OR command + option + i on a Mac OR right click on webpage and press inspect to see specific element

Change docking location- Open DevTools-> top right three button column -> Dock side

Open and hide console drawer- Open DevTools -> top right three button column ->

You can add extensions to DevTools if needed.

Settings is where you can configure, set shortcuts and etc. for DevTools.

Go to Google to create a better understanding for Google Chrome DevTools

Google Chrome DevTools Element Panel

Lets you see the code for the webpage you are on as it is rendered by your browser such as HTML and CSS.

Elements panel represents DOM and not just the HTML that was loaded. You can change and edit the HTML and CSS and it is temporary.

The Styles panel is used to show all the CSS style rules that are for the current element that is being inspected.

:hov lets you toggle the elements state

The Computed tab will show the final value for each CSS property that applies to a selected element. It shows the values that the browser uses in rendering the item.

Persistence allows you to save changes from Chrome DevTools.

Google Chrome DevTools: Console Panel

Used to debug Javascript code for a web page or application. It will show error messages thrown by the parser. The console tab has a command line that enables you to enter JavaScript statements and interact with the code that has been loaded in the browser.

To enter the Console Panel when DevTools is close use command + option + j in Mac

console.log () is a console object for Javascript that works directly with the console in your code. It is able to log messages to the console by passing literal values and variable names as arguments

Example of console.log in Javascript code

Console Command Line
It is used for selecting and inspecting DOM elements and evaluating Javascript expressions. Console tab blue arrow will show you are in the command line. You can use this instead of the Elements Panel if you are more comfortable working within a command line.

Type ‘inspect($_) in the Console command line to enter the Elements panel for the code you are working with.

Google Chrome DevTools: Sources Panel

Used to look at actual files that page is based on and can verify the code that is being loaded. You can also use to debug Javascript Errors.

Hit Command + P for Mac to get a list of files used on the page. Type .css for example to get all the CSS files on that page. You can also look through drilling into the files tabs located on the left column.

Breakpoints allow you to tag a line of code and tell the browser to pause the execution once it reaches the line with the breakpoint. You can insert breakpoints either by using the debugger command in JavaScript or within the Sources panel.

Use command + f (in Mac) within the Sources panel to display a search box within a file.

Click on the line of code that you want to insert a breakpoint on.

The breakpoints that you have enabled will be within the Sources Panel under the column in the right side. Reload the webpage after breakpoints are set to enable your changes.

Google Chrome DevTools: Network Panel

Use Network Panel to visualize HTTP requests and responses. It is useful when you load pages using HTTP. The Network panel does not run unless you request it. Hold shift while you reload the webpage to enable the Network panel.

You can dig into the headers by clicking ‘view source’. The Timing tab can show the timing of loading.

The Network Panel can be used to diagnose slow page loading times. Go into Network Panel -> hold shift and reload webpage (hard reload) -> you should see files loaded -> the Waterfall column (on the right side under Network Panel) will show the time taken for each request. -> show Overview to see a visual representation

You can use DevTools to see how a website performs over different internet connections as users can be on slower connections. The Network Panel lets you test this by allowing you to throttle the connection. Go into the Network Panel -> adjust throttling under the enable setting and choose preference -> hard shift by holding shift and reloading the webpage

Visit stackoverflow for more information regarding how to use developer tools in chrome or reach out in the comments.