Developer Tools

Debugging Web Page Development

Overview

Developer tools are tools that can be used for debugging in web page development and are provided by each browser.

Using developer tools, you can see at a glance where the rendered HTML source code is displayed on the web page and what CSS properties are applied to the HTML elements. It's also possible to check the execution status of JavaScript.

You can also check lots of other information necessary for development, such as the status of communication with the server, the time it takes to communicate, and the status of storage including Cookies.

Developer Tools

Learning Objectives

When creating a web page, you may encounter problems such as the layout breaking or JavaScript not working as expected. In order to fix them, you need to identify the code that causes the problems. By using developer tools you can check the HTML structure, JavaScript errors, and responsive display at the same time as the web page, making it easier to find problems and investigate the cause. Learn how to use the developer tools so that you can find the cause and solve the problem by yourself.

Learn from Here

This section introduces the developer tools for the Google Chrome browser, the most popular browser in recent years. First, let's learn about HTML and CSS functions that are easy to use and useful for web page development.

  • Experiencing Developer Tools

    Confirm the HTML of the Page

    Modify the HTML

    Confirm the CSS of the Page

    Modify the CSS

    Add Some CSS

Recommended Materials

  1. Using the Inspect Tool (Development Mode)

Share what you learn today!