Paste Element Paste the last position inside the selected node
Copy outerHTML Copies a node.
Copy selecter Copies the CSS selector
Copy XPath Copies the XPath selector
CSS xPath differences click to view simple:
Xpath is much more powerful, much more accurate, you can match text, you can find parents. Example: / / * [@ id = “select”] / div [3] / div [2] / div [1] / div [2]
CSS selectors are faster, but can’t select a parent (cSS4 will reportedly add this feature) example: #select > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) > div.lf.select_title
Hide Element Hides the node
Force State Adds the mouse status
Break on is the DOM structure Break point, when it changes state, will stop
Expand recurshrink all nodes
Collapse children Collapse children
Scroll into view to Scroll the page to the selected node
Focus
Styles Views the current style of the page, which can be modified temporarily here The source of the current style, xxx.css, the line number, and the box model of the current structure are displayed. Click Show All to display all the default styles
Event Listeners Registered eventsBy selecting toggle, you can view the current structure binding event and the events of the parent binding. Note: Suspension can temporarily remove this event
Ancestors
3, Passive, Blocking
Framework listeners
DOM Breakpoints Are DOM structure Breakpoints added
Properties Select all methods and Properties of the node
Accessibility
View DOM structure and temporarily modify DOM content
View page Styles and temporarily modify page Styles
See Computed(calculated attributes) for the DOM structure
Find event Even Listeners bound to the node
console The console
In addition to viewing error messages, printing debugging information (console.log()), and writing some test scripts, this can also be viewed as a Javascript API. For example, if I want to see what methods and properties console has, I can just type “console” into the console and execute
console.assert()
Check if the first argument is true, false raises an exception and prints the corresponding message on the console.
console.clear()
Clear the console.
console.count()
The number of calls is recorded with the parameter identifier, and the identifier and the number of calls are printed on the console at call time.
console.countReset()
In conjunction with console.count(), clears the number of calls.
console.error()
Print an error message using string Substitution.
console.group()
Tree structures are printed and integrated with groupCollapsed and groupEnd methods.
console.groupCollapsed()
Create a new inline group. The method of use is the same as that of Group, but information printed by groupCollapsed collapses by default.
console.groupEnd()
Used with console.group() to end the current Tree
console.info()
Prints information starting with an exclamation point character in the same way as log
console.log()
Print strings, you can use printf-style placeholders. Supports characters (%s), integers (%d or % I), floating point numbers (%f), and objects (% O).
Example: console.log(“%d year %d month %d day “,2011,3,26);
console.profile()
You can start collecting data during javascript execution, identified by the first parameter. Similar to the Chrome console option open Profiles, see Chrome Profiles for details
console.profileEnd()
With the Profile method as the end of the data collection. (No results have been found yet)
console.table()
Print the data into a table. console.table [en-US]
console.time()
A timer that takes a parameter as an identifier.
console.timeEnd()
Used with console.time(), takes a parameter as an identifier to end a particular timer.
console.trace()
To print the stack trace.
console.warn()
Print a warning message that can be used in string Substitution.
There are useful filters on the left that can be displayed by classification
Common methods
methods
describe
The $()
Returns the first element matching the specified CSS selector, equivalent to document.querySelector()
? (a)
Return to match the specified CSS selectors all the elements of an array, is equivalent to the document. QuerySelectorAll ()
$x()
Returns an array of all elements that match the specified XPath
The $_
Associates the result of the last execution
$0
Associated with what we’re currently selectinghtmlNode, this method records ($0, $1, $2, $3, $4)
copy()
You can do it globallycopy()Copy any resources you can get your hands on in console, including the variables we mentioned in the previous article. For example,copy($_) or copy($0)
Instead of returning the first matched element as expected, $() returns an array of all matched elements
Sources The source code
Mainly used to view source code and debug JS
Breakpoints can be triggered when a DOM element node changes, when the XHR lifecycle state changes, or when a specified event is executed
Network network
The resource information (including status, resource type, size, and elapsed time) obtained from analyzing HTTP requests after initiating web page Request requests can be used to optimize network performance.
This panel includes 5 pieces:
Area ① –> Controls Controls the look and function of a Network.
Area ② –> Filters control what exactly the Requests Table displays.
Area ③ –> Overview Displays the obtained resource timeline.
Area ④ –> Requests Table displays information about all obtained resources in the order in which they were obtained. Click the resource name to view detailed information about the resource.
Area ⑤ –> Summary Displays the total number of requests, data transfer volume, and load time.
The following information is displayed for area ① Controls
Recording Network Logs
Log cleaning
Capture screen
The filter
The view switches
Log Retention switch
Cache switch
Network connection switch
Speed threshold
Area ④ Requests Table information is as follows
Parts not listed can be right-clicked in the header of area ④
Name Resource Name. Click the resource Name to view details about the resource, including Headers, Preview, Response, Cookies, and Timing.
Method Indicates the Method type of the request
Status INDICATES the HTTP Status code.
Remote Address Remote Address
Type MIME Type of the requested resource.
Initiator indicates the object or process from which the request originated (the source of the request).
Mouse over to display details
Cookie Number of cookies attached to the current request
Priority Priority
Size Size of files downloaded from the server and requested resources. This column is displayed if the resource is fetched from the cache (from disk cache)
Time Time of a Request or download. Total Time from the Time when a Request is initiated to the Time when a Response is received.
Waterfull displays a visual waterfall flow (timeline state axis) for all network requests. Click on the timeline to view the details of that request
Area 5 Summary is as follows
DOMContentLoaded The time it takes from the start of the page until the DOM is fully loaded and parsed (without waiting for CSS, images, or subframes to load), marked with a light blue line at Waterfull.
Load Is the time it takes from the start until all DOM, CSS, JS, and images on the page are fully loaded, marked with a light red line at Waterfull.
Requests Number of successful requests/total requests
Transferred all resource size
Finish Time taken from the start of the page to the completion of the last server interaction
View details about a specific resource
You can view details about a resource by clicking its Name. The following information is displayed
Headers HTTP header of the resource.
Preview displays the Preview based on the resource type you select (JSON, image, text).
Response Displays HTTP Response information.
Cookies Displays the Cookies in the HTTP Request and Response processes of resources.
Timing displays how much time is spent on each part of the resource throughout the request life cycle.
Performance performance
Viewing page performance is complicated. ~~~
Memory memory
Viewing page performance is complicated. ~~~
Application application
Record all resource information loaded by the website, including stored data (Local Storage, Session Storage, IndexedDB, Web SQL, Cookies), cached data, fonts, images, scripts, style sheets, etc.
Security security
To determine whether the current web page is secure, this panel allows you to debug security and authentication issues on the current web page and ensure that you have implemented HTTPS correctly on your site.
Hypertext Transfer Protocol over Secure Socket Layer (HTTPS) is a Secure HTTP channel. That is, add SSL layer to HTTP, and SECURE Sockets Layer (SSL) is the basis of HTTPS security. Therefore, SSL is required for details of encryption. It is a URI scheme (abstract identifier scheme) with the same syntax as HTTP: scheme. For secure HTTP data transfer. HTTPS: THE URL indicates that it uses HTTP, but HTTPS has a different default port than HTTP and an encryption/authentication layer (between HTTP and TCP).
The differences between HTTPS and HTTP are as follows:
(1) HTTPS requires a CA to apply for a certificate. Generally, free certificates are rare and need to pay fees.
② HTTP is a hypertext transmission protocol, and information is transmitted in plain text. HTTPS is a secure SSL encryption transmission protocol.
(3) HTTP and HTTPS use completely different connection methods and use different ports, the former is 80, the latter is 443.
(4) HTTP connections are simple and stateless; HTTPS is a network protocol that uses SSL and HTTP to encrypt transmission and authenticate identity. It is more secure than HTTP.
One, if the web page is secure
You can View the main Origin server certificate information by clicking View Certificate. Click on the left to view connection and certificate details for the specified source.
Second, if the web page is not secure
The following message is displayed: This panel can distinguish between two types of insecure pages:
If the requested page is serviced over HTTP, the primary source is marked as unsafe.
If the requested page is obtained over HTTPS, but the page then continues to retrieve content from other sources over HTTP, the page is still marked as unsafe. These are known as mixed content pages, and mixed content pages are only partially protected because HTTP content (unencrypted content) can be hacked by sniffers and vulnerable to man-in-the middle attacks.
Audits The audit
Diagnose the current web page in terms of network utilization and web page performance, and give some optimization suggestions. For example, list all CSS files that are not used.
This will generate something like the one shown
The circle is the score, and the higher the score, the better.
