Introduction

Browser developer tools are essential tools in web development.

Good use of developer tools can help you debug your website, optimize performance, improve accessibility, and more.

This article describes the basic usage of browser developer tools and various techniques.

What are Developer Tools?

Developer tools are tools that provide useful functions such as debugging websites, optimizing performance, and improving accessibility.

Major browsers (Google Chrome, Mozilla Firefox, Microsoft Edge, etc.) come standard with developer tools.

How to Open Major Browsers

In common with all major browsers, you can open the developer tools by pressing the “F12” key or Ctrl + Shift + I (Command + Option + I for MacOS).

Here is a Google Chrome Example with MacOS

Element Tab

View & Edit Elements

The elements tab can view and edit the HTML and CSS of a website.

This tab allows you to see the structure and style of your web pages.

By double-clicking on an HTML element displayed in the upper right corner, you can freely edit the element itself, its contents, classes, attributes, etc.

The styles section below allows you to edit CSS styles.

The computed tab within the elements tab allows you to see the actual CSS property values applied to the selected element.

Inspect Mode

You can activate inspect mode by pressing the button in the top left corner of the developer tools.

After activating inspect mode, move the mouse cursor and click on the element you want to select on the web page, and the selected element will appear on the elements tab, where you can see how the element is marked up in HTML.

Console Tab

JS Code Execution

Entering JavaScript code on the console tab and pressing the Enter key executes the JavaScript code and allows you to view the results of the execution.

Message Display

The console tab displays errors, warnings, and other messages on the web page.

If an error occurs, the number of lines and file names of the script in which the error occurred are also displayed along with the error message, which is useful for debugging.

Sources Tab

View and Edit Source Code

The Source tab allows you to view the HTML, CSS, JavaScript, and other source code of a web page.

The source code is displayed as a folder hierarchy, and each file can be expanded to see its contents.

You can also search the code using the search window.

Or you can directly edit the source code, including HTML, CSS, and JavaScript.Use the editor to edit and save the code so that changes are immediately reflected.

Breakpoint Setting

In the source tab, you can set breakpoints.

Breakpoints are used to pause JavaScript execution for debugging.

By clicking on any number of lines in the source code, you can set a breakpoint at that point.

After setting a breakpoint, reload the screen and execute the file, JavaScript execution will stop at the location where the breakpoint was set, and you can check the contents of variables and the screen status at that time.

You can check the contents of variables in the scope panel on the right or by hovering the mouse over a variable in the source code.

Network Tab

The network tab displays detailed information about all network requests issued by the web page.

You can see basic information such as the request URL, method, and HTTP status code, as well as detailed information such as the request header and response body.

How to use the Timeline

The network tab displays a timeline of network requests and their responses.

The timeline visually displays information such as web page loads, request processing times, resource downloads, etc.

Each request is represented as a horizontal bar.

The position and length of the bar represent the time from issuing the request to receiving the response or processing time, and its color and shape vary depending on the type and status of the request.

Application Tab

The application tab allows you to manage and manipulate various resources and storage information provided by the browser, such as local storage for web applications, session storage, cookies, and service workers.

By clicking on an item in Storage, you can see the key, value, etc. of the data stored in that storage.

You can also add, delete, and edit data.

Other Functions

Change Display Device

By clicking on the device icon in the upper left corner of the developer tools, you can switch to a different device view of the web page and preview it.

The device toolbar contains presets for various devices. Clicking on the drop-down menu on the left side will display a list of available devices.

Selecting a device from the list will change the display of the web page to match the size and resolution of the selected device.

Instead of selecting a device, you can also preview the page by specifying the horizontal and vertical sizes.

Full-Size Screenshot

In the Developer Tools, you can take a full-size screenshot of the screen.

To do this, as before, click on the device icon in the upper left corner of the developer tools to display the device toolbar.

Then select “Capture Full-Size Screenshot” from the three dots to take a full-size screenshot.

Useful Extensions for Development

RESTer

RESTer is a Google Chrome extension that allows you to perform HTTP requests.

HTTP requests can be sent in the browser by specifying parameters such as URL, method (GET, POST, PUT, DELETE, etc.), header, and body.

The RESTer stores a history of previous requests, which can be reviewed at a later time or partially modified and sent again.

Furthermore, by defining endpoint URLs and other parameters as environment variables, URLs can be easily switched between different environments.

Summary

We have found that using developer tools can help in many ways, such as reviewing and editing page elements, executing JavaScript code, and monitoring the network.

Developer tools are essential for efficient development and debugging for web developers.

We encourage you to learn these features and become proficient in using the developer tools.

About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by WESEEK, Inc.

GROWI is a wiki service with features-rich support for efficient information storage within the company. It also boasts high security and various authentication methods are available to simplify authentication management, including LDAP/OAuth/SAML.

GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English.

For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.