This article will omit some knowledge and details that are too basic

Continue to update, welcome to follow ~

Devtools – Good news for front-end developers, a tool that advanced engineers must forge!

So take a screenshot of DevTools

The current new version has the following menu:

  • ElementsLook at the DOM tree
  • ConsoleThe console
  • SourcesLook at the source code and break points
  • NetworkLogs network request information
  • PerformanceRuntime performance (parsing JS, evaluating styles, redrawing, and so on)
  • MemoryMemory distribution of JS objects and associated DOM nodes
  • ApplicationRecord resources (storage information, cache information, images, fonts, scripts, styles, etc.)
  • SecurityCheck the security of the face page
  • AuditsGive suggestions for improving page performance

Start this article one by one!

Elements

The dom tree

As the 1 area in the figure above, I believe that everyone is a mature veteran, simple not to repeat, pick some uncommon but practical talk

1. Right-click the menu

  • Hide elementHide elements. This must be said, I believe we see the AD or remove the thunder seed (#. # Prude) mask layer when you must think of your professional skills, then you aredisplay:noneorDelete element? Have a tryHide elementBetter to use
  • Force state

    Enforcing state is simply adding pseudo classes. This feature is useful for debugging pseudo-class styles:

  • Break on

    Breakpoint debugging, yes, HTML can also break points!

  1. subtree modificationsTriggered when a child node is added, deleted, or moved
  2. attribute modificationsTriggered when node attributes are modified
  3. node removal

Event Listeners

List of event listeners

Select an element and you can see a list of events (bubbling and capturing) that pass through it.

  • Ancestors AllThe click event for the div binding is not displayed if you deselect it
  • Framework listenersRemove the frame event

Properties

The attributes that the element contains

The diagram contains several categories of properties, which you can click on to see the specific properties, all of which can be invoked through dom.xx

Accessibility Accessibility is used to support h5 visual impairment

Refer to the link

The author CompileYouth