塑料外贸推广 澄海品牌推广 汕头外贸推广

As the saying goes, if you want to do well, you must first sharpen your tools

No matter what industry you are in

As long as you want to do your work to the extreme

You must have an artifact in your hand

To assist you in completing your work more efficiently

Today we have this video

Let’s talk about the necessary development tools for web application developers

Hello everyone

I’m Win Xuan, welcome to watch Win Xuan Decoding

General programmers, especially programmers who focus on web page production

No stranger to Chrome DevTools developer tools

Chrome Developer Tools is a set of built-in

Development and debugging tools in Google Chrome browser

Programmers generally use it to analyze, iterate and 玩具amazon开店 debug web pages

After the programmer writes HTML and CSS

Usually open the browser to preview the written source code

See if the final effect is in line with the original design plan

Generally speaking, few people can do it in one step

Usually need to make some minor adjustments to achieve the final desired effect

Modify the code, save the code and preview the code

This trilogy becomes a cycle that needs to be repeated

This cycle is time-consuming and inefficient

So programmers must use Chrome Developer Tools

To improve development efficiency

Chrome developer tools are essential for web page production

So students must learn to use this tool

Make good use of this tool to free up more time. . .

Next, we start to talk specifically about how to use this developer tool

To start the developer tools

We can right-click anywhere on the page

Then click Inspect in the options

Chrome will start this tool at this time

You can also press F12 to open the developer tools

You can even press cmd+option+i (macOS)

ctrl+shift+i (Windows) start

I’m drunk too, so many shortcuts!

When the developer tools are launched

Chrome will display this tool on the right

We can adjust the location of the tool

It has four adjustment modes

Is that we can display the tool on the right

Underside

Left side

And completely pop it up

Generally programmers will have two screens

That way, the pop-up window

Move to the second screen

Then maximize this window

That way, it’s more convenient for programmers to debug

There are many Panels (panels)

But today we only focus on two

Element and Network

Wait for the students to learn JavaScript later

Let’s talk about other panels

In the Element panel, it will show that it looks very similar

HTML DOM (Document Object Model) and CSS

There is a difference between HTML and DOM

When the browser successfully downloads the HTML source code

The browser will convert these HTML source code

Converted to DOM tree structure (Tree Structure)

HTML source code is actually text (Text), you can’t see their direct relationship

There is a benefit to converting HTML to DOM

That is, the DOM can now display the relationship of each node

Let’s take a look at this DOM picture

Head and Body are child nodes of HTML

H1 is a child node of DIV

With this relationship, we can go through JavaScript

Extract or change these nodes

When we move the mouse to these nodes

The page on the left will highlight the corresponding element (Element)

We can also use the mouse to click to expand or collapse these nodes

We can also use the up and down keys to move in the node

We can also click here

Then accurately select the elements we want to check from the page

After clicking, the Element Panel will jump to the corresponding element DOM node

If you want to search for HTML DOM

You can click here first

Then press cmd + f (macOS)

Or ctrl + f (Windows)

We can enter keywords here

You can also use selector (selector) to search

For example, .content

In addition to searching, we can also make some changes to the HTML DOM

For example, if we want to change the title of this H3 to H2

We can double click here and directly change H3 to H2

When I press Enter, the page on the left will automatically update

I don’t need to save the code and refresh the page

You can preview the effect directly

This way I don’t need to switch frequently between editor and browser

It saves time and trouble, but also makes me more focused

By the way, I would like to remind you that these changes are temporary

Will disappear after refreshing the page, so when we finish testing

These changes must be saved in the source code

We can also delete elements directly here

I choose an element at random and click the right button

Then select Delete element

The content can also be changed

We double click here to make changes and press Enter

You see, the content has been updated

When we click on the DOM element

The CSS panel will update the corresponding CSS style

Here are all the CSS parameters in the content class

We can click here to disable a certain parameter

You can also click here to modify the parameters

We try to change the background color to green

We can also use the up and down keys to add or subtract these values

If you want to add new parameters, you can click here

Then enter the new parameters, for example: border: 1px solid red

There is a box below,

Let’s take a look, what is the use of this box?

Its main function is to allow programmers

See the occupied space of an element at a glance

Because what we see with the naked eye

It may take up more space than it actually is

Because the blank area of ​​padding and margin cannot be distinguished by the naked eye

Need to be displayed by this box

Let’s take a look at how much space this DIV actually occupies

The width of the content itself is 300px, because here we define

In terms of height, we did not define

All browsers will give us a value

Then padding (inner margin), we set 40px

All the top, bottom, left, and right values ​​are 40px

The border (border) and margin (outer margin) values ​​are empty

Because we did not set these values ​​in css

Many times, we need to rely on this box

Go and help us sort out the actual space occupied by the elements

Without it, it would be like a blind person touching an elephant

I can only guess the actual space occupied by it

If you want to know which file these parameters are saved in

We can click here

Shown here is line 6 in the style.css document

Clicking on this link will directly open the source code of style.css

This source code will appear in the Sources panel

Let’s take a look here, these are the source code of the website

We can click to view these source codes at will

Next, let’s talk about the Network Panel

I first open the google page, they have a lot of requests

It’s convenient to explain to you later

This panel can be roughly divided into 5 parts

With Control (control panel)

Filters

Timeline

Request Table

And Summary (summary)

Every time we refresh the page

The network panel will automatically record all network-related requests and responses

Multiple timelines will be displayed here

Each timeline represents a network activity

The list will also show all requests here

When we click on the data in the list

The corresponding data will be highlighted here on the timeline

The details of the request will also be displayed here on the right

For example, the URL of the document

If there is header information (header) will also be displayed here

You can switch to other tabs here

This Preview is to preview the downloaded document

Response will display the downloaded source code

We can also click here to format the source code that has been minify

Generally the websites we visit

There may be a dozen or twenty request responses

The list will be full here

At this time, we can use filters

Filter out documents that we don’t need to follow

We can click here, assuming we only focus on css documents

I just order css

If I just want to see html documents, click Doc

I can also enter keywords here, such as api.js

We can click here to clear all the information

And click here, we can simulate various internet speeds

This is also a feature I often use

Web pages generally appear in various situations on devices with slow internet speeds

It just so happens that we can use this feature to simulate devices with very slow internet speeds

Let’s check if the page will time out when it loads

Causes an error on the page

In addition to simulating internet speed

We can also simulate how web pages are displayed on various devices

After clicking this icon, you can enable Device Toolbar to preview

Here are some default screen sizes

We can also choose the mobile device to test from here

We can also choose Responsive to manually adjust the pixels to be tested

The Element and Network panel is introduced

These two panels are easier for beginners to use

Chrome Developer Tools is a very powerful tool

We will start learning JavaScript in the future

I will share other panels with you

For example, Console and Sources

This is a function that must be used to learn JavaScript

Okay, that’s all for this video

I hope you enjoy this sharing

If you think it will help you

Welcome to like, share and follow

See you next time, bye!

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress | Theme Designed by: axis Bank bca Bank bni Bank bri Bank btn Bank cimbniaga Bank citibank Bank danamon Bank Indonesia Bank mandiri Bank ocbc bank Panin Bank syaria hmandiri dana google gopay indihome kaskus kominfo linkaja.id maybank ovo telkom telkomsel WA