In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Servers >
Share
Shulou(Shulou.com)06/01 Report--
This article is about how to use Chrome developer tools more professionally. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
As the name implies, the Chrome development tool is a tool that allows Web developers to intervene and manipulate Web pages through browser applications, as well as to debug and test Web pages or Web applications. With this tool, you can do many interesting things:
Problems with ◆ debugging interface
◆ uses breakpoints to debug JavaScript code
◆ optimizes your code
To open developer tools, you just need to right-click anywhere on the page, select check elements or select tools > more tools > developer tools from the menu in the upper right corner.
The following examples are all demonstrated under Google Chrome's Canary browser.
1. Quickly edit HTML elements
Have a try:
◆ selects the "Elements" panel
◆ selects a DOM element in the Elements panel
◆ double-click the DOM element tag you need to open, and you can edit it
The tags will be updated and closed automatically when you are finished
two。 To the specified number of rows
You can use the ": number of rows: number of columns" function in the specified file in the "Sources" panel. Try the shortcut key CMD + O.
3. Expand all child nodes
Have a try:
◆ selects the "Elements" panel
◆ can expand all child nodes by selecting the DOM element and holding down Alt + clicking the left mouse button where there is a haircut.
4. Change the location of developer tools
Try the shortcut key: CMD + Shift + D. There are three options for setting up developer tools:
◆ does not display developer tools in the window
◆ displays developer tools on the right side of the window
◆ displays developer tools at the bottom of the window
5. Search for DOM elements through the CSS selector
Try the shortcut key: CMD + F / CTRL + F and enter the class name or ID name you need to search for the corresponding selector.
6.Material and custom color palettes
You can click the small icon in front of the color code, and you can choose:
◆ page colors: this panel is automatically generated from your Web site (in your CSS)
◆ Material Design: this panel automatically generates colors from the Material Design panel
7. Multiple cursors
Move the cursor by holding down CMD + clicking to add multiple cursors, or you can use CMD + U to undo the cursor of your choice.
8. Copy the Data URI of the picture
◆ selects the "Network" panel
◆ selects your picture in the "Resources" panel
◆ right-click on the picture and select the "Copy Image as Data URI" option
9. Trigger pseudo class
◆ right-click the left panel element and select "Force Element State"
◆ also selects the icon to toggle pseudo-class status in the panel on the right.
10. Select multiple columns by dragging
◆ selects the "Sources" panel
◆ selects the file you want in the Sources panel editor
◆ Alt + drag the mouse
11. Use $0 to get the current element
◆ selects the "Elements" panel
◆ selects the DOM element in the Element panel
◆ clicks "Console" and enters $0 to get the current element
twelve。 Display in element
Select a DOM node:
◆ right-click in the Console panel
◆ selects "Reveal in Elements Panel"
13. View event listeners
◆ Select "Elements" panel "
◆ selects an event from the Event Listeners menu
◆ right-click and select "Show Function Definition", you can view the corresponding source code
14. Preview Easing
◆ can preview easing by clicking on the easing icon (purple icon)
◆ you can select another easing or custom easing by browsing
15. Media inquiry
◆ clicks the mobile phone icon in the upper left corner to select the device mode
◆ Click breakpoints ("blue", "green", "orange") toolbar to select breakpoints
If you can click a toolbar, you can find its corresponding location in the source code.
16.Network Filmstrip
"Film Strip" displays a screenshot of the page rendered from start to finish. You can click the screenshot and view the view in timeline-style.
◆ selects the "Network" panel
◆ clicks the "record" icon
◆ reloads the page
17.Copy Response
You can copy the "Response/Request" header in network resources.
◆ Select "Network" panel "
◆ selects the file you want in the Sources panel editor. "
◆ right-click and select "Copy Response"
18. Run a predefined code snippet
◆, select: Sources > Snippets in the left sidebar
◆ right-click to select Select New
◆ enter the file name and the code snippet in the panel on the right
Right-click on the ◆ snippet file name and select Run
19.Device Emulation Sensors
You can simulate mobile device sensors:
◆ touch screen
◆ geolocation coordinates
◆ accelerometer
You can do this:
◆ selects the "Elements" panel
◆ choose "Emulation > Sensors" and click "Esc" to cancel
20.Workspaces
◆ selects the "Sources" panel
◆ right-click in the Sources panel and select "Add Folder to Workspaces"
◆ select your file and right-click, and select Map to Network Resources
◆ modify your file code and view
Thank you for reading! This is the end of this article on "how to use Chrome developer tools more professionally". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.