Chrome Developer Tools

Acessing dev tools The longcut The shortcut Select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools. Right-click on any page element and select Inspect Element. The shortcut Ctrl + Shift + I to bring up dev tools Ctrl + Shift + J to open dev tools with console in focus

Dev tools window

Dev tools tabs Overall, there are eight main groups of tools available view Developer Tools: Elements Resources Network Sources Timeline Profiles Audits Console

Elements tab

What you can do here Inspect and edit on the fly any element in the DOM tree in the Elements panel. View and change the CSS rules applied to any selected element in the Styles pane. View and edit a selected element's box model in the Computed pane. View any changes made to your page locally in the Sources panel.

Live editing of a DOM Node

Live edit a style Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets). To edit a name or value, click on it, make your changes, and press Tab or Enter to save the change.

Examine and edit box model parameters Examine and edit the current element's box model parameters using the Computed pane. All values in the box model are editable, just click on them.

Console Tab

What you can do here Open the Console as a dedicated panel or as a drawer next to any other panel. Stack redundant messages, or display them on their own lines. Clear or persist output between pages, or save it to a file. Filter output by severity level, by hiding network messages, or by regular expression patterns.

Writing to the console Use the console.log() method for any basic logging to the console. It takes one or more expressions as parameters and writes their current values to the console, concatenating multiple parameters into a space-delimited line. Executing this line of code in your JavaScript: Console.log(“Node count”,a.childNodes.length,”and the current time is:”, Date.now());

Debugging Javascript While running your javascript it’s natural to have some errors. So how do you fix them? Open the console to see the errors that show up(if any that is. Javascript sometimes doesn’t work even if it shows no errors) Use the very traditional method of alerts or console.log() statements. Refer to this link to know how to use the dev tools JS debugger for a more systematic and advanced approach - https://developers.google.com/web/tools/chrome-devtools/javascript/

Network Tab

What you can do here Use the Network panel to record and analyze network activity. View load information in aggregate or for individual resources. Filter and sort how resources are displayed. Save, copy, and clear network recordings. Customize the Network panel to your needs.

Network Tab Panes Controls. Use these options to control how the Network panel looks and functions. Filters. Use these options to control which resources are displayed in the Requests Table. Tip: hold Cmd (Mac) or Ctrl (Window/Linux), and then click on a filter to select multiple filters at the same time. Overview. This graph shows a timeline of when resources were retrieved. If you see multiple bars stacked vertically, it means that those resources were retrieved simultaneously. Requests Table. This table lists out every resource that was retrieved. By default, this table is sorted chronologically, with the earliest resources at the top. Clicking on the name of a resource yields more information about it. Tip: right-click on any of the table headers except Timeline to add or remove columns of information. Summary. At a glance this pane tells you the total number of requests, amount of data transferred, and load time

Record Network Activity When the Network panel is open, DevTools records all network activity by default. To record, just reload a page while the panel is open, or wait for network activity on the currently loaded page. You can tell whether or not DevTools is recording via the record button. When it's red DevTools is recording. When it's grey DevTools is not recording. Click this button to start or stop recording, or press the keyboard shortcut Cmd/Ctrl + E

Emulate slow network connections Emulate 2G, 3G, and other connection speeds from the Network Throttling menu. You can select from a variety of presets, such as Regular or Good 2G. You can also add your own custom presets by opening the Network Throttling menu and selecting Custom > Add. DevTools displays a warning icon next to the Network tab to remind you that throttling is enabled.

View HTTP header Clicking the Headers shows the headers for that resource. The Headers tab displays the resource's request URL, HTTP method, and response status code. Additionally, it lists the HTTP response and request headers and their values, and any query string parameters.

For more Check this course out for a great tutorial on the chrome developer tools https://www.codeschool.com/courses/discover-devtools Or the official google development tools documentation https://developers.google.com/web/tools/chrome-devtools/