The Google Chrome web browser includes a variety of Developer Tools that can help you while maintaining various components of your website. For instance, you can use the Chrome Dev Tools to edit CSS and preview live changes.
Access Dev Tools
There are multiple ways to access the Developer Tools in Google Chrome. You can follow any of the steps from the list below.
- With your web browser open, simultaneously press the Ctrl + Shift + i (for MacOS: command + option + i) keys on your keyboard.
- Click on the three (3) dot menu icon. Hover your mouse of More tools
Then, select Developer tools.
- Right-click anywhere on a web page. Select Inspect from the menu list.
- Press the F12 key while on a web page–only on Windows/Linux.
NOTE: Any of the steps above will open the Developer Tools pane. To follow along with the example, it may be easier to open Dev Tools as a separate window. To do this simply click on the three (3) dot menu icon inside of the Dev Tools pane, then click to select the first icon in the Dock side setting to “Undock into separate window“. If you are using Windows/Linux, you can also press Ctrl + Shift + d to toggle between views.
|Full Width||Partial Width|
- Using Incognito Mode, navigate to https://googlechrome.github.io/devtools-samples/debug-js/get-started in your Google Chrome Browser.
- Open the Developer Tools pane.
- Click on the Sources tab.
- In the File Navigator pane, under the Network tab, click on the get-started.js file and its code will be displayed in the Code Editor pane.
- Insert a line-of-code breakpoint to tell Dev Tools to pause the script execution, to help you determine bugs/fixes for the code you are troubleshooting –at the particular line you choose. To do this, simply click on the number (to the left of the line of code) in the Code Editor pane.
NOTE: For the example, click on line 32 of the get-started.js file.
- Enter a value into the Number 1 and Number 2 fields on the actual page, then click on the Add Number 1 and Number 2 button.
NOTICE: For the example, enter the values 5 and 1. Also, the script pauses at the line of code selected (line 32) in the previous step.
NOTICE: The variables addend1 and addend2 are correct, however, the sum variable is appending addend2 to addend1 rather than adding the values together.
- Now, enter the following line of code into the Console:
parseInt(addend1) + parseInt(addend2)
Then, hit the Enter (for MacOS: return) key.
NOTICE: The value of the expression is the result of properly adding the integer values, rather than appending the string values.
- Replace the code at line 31 with the following code:
var sum = parseInt(addend1) + parseInt(addend2);
Then, press Ctrl + s (for MacOS: command + s) to save the script (locally in your browsing session).
NOTICE: The values should be added accordingly and results should be correctly displayed.