1. Initiate the XHR request again

Network panel is probably the most commonly used panel in the usual and back-end syndication. However, every time we want to review a request again, we usually trigger the XHR request by refreshing the page or clicking the button, which sometimes seems troublesome. We can initiate a new request by using the Replay XHR provided by Google, which is helpful to improve our development efficiency.

2. Edit any text on the page

In the console input document. Body. ContentEditable = “true” or document. DesignMode = ‘on’ can be achieved for web editor.

This feature is also NICE, for example, if you want to test if a long piece of data is out of order, you don’t have to write a piece of data from the front end or ask the back end to modify the data and then request it again, you can edit it directly on the page.

3. Slide mode of Network panel

Start theNetworkUnder the panelCapture screenshotsYou can capture screen shots as the page loads. It’s kind of like a slide show.

4. Increase or decrease the CSS property value

As a front-end developer, the Elements palette is often used to find Elements and their CSS styles. Sometimes it is a bit difficult to adjust pixel PX. Use the shortcut keys to do this for you. Select the pixel value in the Styles column near the one you want to adjust and use the shortcut keys:

* Increment 0.1 * Mac: Option + Up and Option + Down * Windows: Alt + Up and Alt + Down * Increment 1 * Mac: Up + Down * Windows: Up + Down * Increment 10 * Mac: ⇧+ up and ⇧+ Down * Windows: ⇧+ up and ⇧+ Down * increase 100 * Mac: ⌘+ up and ⌘+ Down * Windows: Ctrl + Up and Ctrl + DownCopy the code

5. Copy the image as a data URI

  • chooseNetworkpanel
  • Select from the Resource panelImg
  • Right click on thecopy response(Encoded asbase 64)

6. Capture DOM elements

When you just want to take a screenshot of a particular DOM node, you might need to use other tools for a while, but now you just select that node, Go to the Command(CTRL/CMD + Shift + P) menu and use Capture node screenshots.

Not only that, you can also get full screen screenshots (including those that are not in the scroll bar area) in this way: from the Screenshot Capture full size Screenshot command.