Debugging Web Site by Google Chrome Developer Tool

I am in charge of technical troubleshooting work for client’s website.

I want to share how to approach a troubleshooting and tips to debug the web site using Chrome Developer Tool.

How to approach a troubleshooting?

Trouble Shooting flow

At first, I receive the trouble shooting request from the reporter, and I ask them to create a ticket in a task management system like JIRA, HubSpot etc.

I ask the reporter to fill out the following information in the ticket.

• Page URL: https://example.com/aaa
• Device: Mobile or PC, in more detail, iPhone, MacBook, Windows, etc…
• Browser: Safari, Chrome, FireFox, etc…
• OS (if needed): Linux, Android, Mac, Windows, etc.
• Date: 03/28/2022
• Description: The detail of the bug.

The best important thing is to know what they want to fix or realize.

Unless we know what they want to do, we will not be able to set a troubleshooting goal.

So you must communicate with the reporter until you understand what the goal is.

After defining a goal of trouble shooting, we will make some hypotheses about the cause, then verify whether the hypothesis is correct.

Debug with Chrome Developer tool

To verify whether the hypothesis is correct, you will use Chrome Developer tool to investigate the website if the website have some problem or bugs.

I often use tools to do the following things:

• Check Network tab
• Set Break Point in javascript code
• Override the resource

Check Network tab

Let’s open the developer tool with command + option + I, if using Mac OS (for Windows, Control + Shift + J).

Then click on Network in the tabs at the top of the tool.

developer tool

Network tab

Opening Network tab, There are table that describe what kind of resources are downloaded and requested from the browser.

Let’s input some resource name like “jquery” in Filter field.

Filter by a resource name

Now you can see the filtered result in the table.

You can filter by resource name and a type of resources (ex Fetch/XHR, CSS, JS, etc).

We can use Network tab to check if necessary resource is downloaded.

and also check if Status of the resource is between 400 ~ 517, the resouce is not downloaded by some reason, for example if Status = 404 means no resource in the url.

Detail for status code, please refer to the https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

Set Break Point in javascript code

We can set breakpoint on the certain javascript line to check javascript execution.

For example, I use Break point to investigate in the following situations.

• Check how some suspicious javascript code work
• Override a value of a variable
• Execute some javascript on the break point

I want to share some example of how to use break point in tools.

Considering the investigation about checking javascript on the html https://aaa.com/shop/g/g4573176221839 (sample url)

Opening the Sources tab and Page tab, there are lists of the resources downloaded from some domains.

Sources > Page

After finding the target resource in the lists, click on it then contents of the resource will be displayed in the right panel.

You can format the contents by clicking “{}” in the below of the right panel.

Let’s set a break point, for example on the line of 750, then reload the page by command + R (if using MacOS)

Set a breakpoint on a line

Javascript execution will stop at a break point

Now you can see the javascript execution stops on the break point (the green line means the place where the javascript execution stops) then you can check the variables at that point or execute additional javascripts from the Console or Snippets.

Override the value of the variable from the Console tab

Click Snippets tab

Execute a custom javascript from Snippets

Also you can set multiple break points.

multiple break point

If you click the icon|▶︎ in the right panel, javascript will resume to execute and stop at the next break point.

Continue to execute javascript by clicking |▶︎

Override the resource

You can modify the original resource using Override functionality in the tool.

Select Overrides from Sources tab, then check the Enable Local Overrides

Overrides

now we can override the resources in Page tab, so go back to Page tab then select the resource, for example google.com/index.html then click right and select “Save for overrides“.

Then you can modify the file as you like, after the changes you can see the changes by reload the page.

Overrides the index page

You can modify any resources, javascript, html, image by Overrides.

Conclusion

Chrome developer tools is a very powerful debugging tool and there are more and more functions i can’t introduce here.

Let’s debug the site with the developer tool :)