dev tools

# Web Site Writing Basics

# Developer

# devtools

DevTools (Developer Tools) is a set of tools for web developers that are built directly into modern browsers (such as Chrome, Firefox, Edge, Safari). 🛠️

This tool allows you to monitor, edit, and debug your website or web application in real time while it is being displayed in the browser, a tool that is absolutely essential for web developers.

The main components of DevTools

DevTools consists of various panels with specific functions, such as:

• Elements

It is used to instantly check and edit the HTML (DOM) and CSS structures of web pages, allowing for changes to Layout and Style live.

• Console

Used for

❇ See notification messages (Log) or errors (Error) that occur in JavaScript code.

❇ Run JavaScript commands to instantly test or interact with web pages

• Sources

It is used to view source code (source code) of JavaScript files and other files, including setting Breakpoint to stop code execution and debug line by line to find problems.

• Network

Used to monitor all network activities requested by web pages, e.g.

❇ Loaded file (HTML, CSS, JS, Image)

❇ Time spent loading each file

• HTTP Status of Requests

• Performance

It is used to analyze and measure the performance of web pages such as load time, JavaScript operation, and display (Rendering) to find points that slow down the web.

• Application

It is used to monitor the data stored on your website, such as Local Storage, Session Storage, and Cookies.

DevTools allows you to "pry" into how your browser is processing your website, making troubleshooting and optimization much easier and faster.

Implementing DevTools is a basic skill that all web developers need to know.

Known for Chrome DevTools and Applications. For Web Developer, this video gives you an overview and how to use DevTools in Chrome browser.

Console.log () is a function in the JavaScript language used to display data (such as text, the value of a variable, an object, or the result of a calculation) to a section called the Console of Developer Tools (DevTools) in a web browser. 💻

The main purpose of use.

Console.log () is the most important tool for web developers to do their daily work. Especially to:

1.Debugging: It's the easiest and quickest way to check where your code is running and whether the values of the variables are as you expect.

2.Valuation Check: Use to print the value of the variable at a certain point in the code to see if the variable has the correct value before applying it in the next step.

3. Code execution tracking: Used to mark (Log), sequence of functions, or events that occur in the application.

Basic Grammar

You can put the data you want to display in one or more parentheses:

JavaScript

/ / Display plain text

console.log ("Hello World!");

/ / Show variable value

Let total = 50;

console.log (total); / / Results: 50

/ / Display multiple values at once

Let name = "Alice";

Let age = 30;

console.log ("User:," name, "is," age, "years old");

When this code runs in the browser, the value sent to the console.log () appears in the Console panel in the DevTools of the browser.

Other useful console commands

In addition to log (), the console object provides other functions that better assist debugging:

Command Usage

Console.warning () Displays a warning message (Warning), usually a yellow message. ⚠️

Console.error () displays an error message (Error), usually a red message. 🛑

Console.table () displays data that is Array or Object in an easy-to-read table format.

console.time () / console.timeEnd ()