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.
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
Using the Inspect Tool (Development Mode)
This article is for those who are new to the developer tools and will allow you to be able check your HTML and CSS.
![Using the Inspect Tool (Development Mode)]()
Using the Inspect Tool (Development Mode)
Progate is an online platform to learn programming. Learn to build your own apps and services.
progate.com
