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
To enter the Console Panel when DevTools is close use command + option + j in Mac
Console 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
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.
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.