The Chrome79 update is here

Today we finally received a major update for Chrome79 on MacOS. Without further ado, here are some useful features related to front-end development:

1. Causes that cookies are filtered during request debugging

  • Open the Network panel, randomly select a request, in the request Cookie panel, you can see a new checkbox:show filtered out request cookies, the default is to hide the filtered request Cookie.
  • After checked, you can see the filtered cookies, which are highlighted in yellow. Hover over the warning ⚠️ icon to see why cookies are filtered. For example, in Figure 2, the reason for filtering is that the domain of the cookie does not match the domain of the requested URL, even though they share a top-level domain (TLD+1, such as jd.com).

Comments: better 🉐️ debug Cookie problems, such as why set the Cookie request did not bring, it is possible to set the domain did not correspond to.

2. Simulate CSS media query: color preference mode and dynamic preference mode

These two features are relatively new media query features:

  • Color preference mode, mainly used to switch between day/night mode
  • Dynamic preference mode, used to switch between animations and transitions in the Web

Example: Open developer tools for any site

  • The console executes the following code to add the two new media queries and styles
  • Open the Rendering panel, find the corresponding simulation option, and click “Select” to switch
const mediaCss = document.createElement('style');
mediaCss.textContent = ` @media (prefers-color-scheme: dark) { * { filter:grayscale(100%); /* Dark mode all elements are 100% grey */}} @media (perfers-reduced motion: reduce) {* {transition-duration: 0.1s! important; Animation - duration: 0.1 s! important; /* Reduce all transitions and animation times to a minimum of 0.1s */}} '
document.head.appendChild(mediaCss)
Copy the code

Comments: Relatively speaking, color mode should be more common. With the promotion of IOS, the night mode has gradually penetrated into the field of user interaction, I believe that in the near future, all browsers will have the night mode support. The night mode and low dynamic effect more content can refer to this article: the media query: color models dynamic effect | | province traffic patterns

3. Code coverage upgrade

With this update, code coverage is no longer green, but red and blue, which is more sensitive to human vision. More importantly, you can use the Source panel to see if a particular row is executed. Even more 🐂🍺, SourceMap allows you to see code execution at the source level.

  • Open the Coverage panel to see code execution Coverage, and click on a URL resource to see the execution of each line of a resource in the Source panel
  • In the case of Sourcemap, you can click on a Source file directly in the Source pane to see the execution of each line of the Source file

4. Debug why a network request is initiated

There are times during development when we need to look at who initiated an XHR request and who asynchronously loaded a JS in SPA. There is also the case of writing a crawler to crawl a page. In previous versions, we can also see the requested Initiator, but it is not convenient to operate only when the mouse is hovering over the corresponding position

Update to Chrome79, you can see the new Initiator panel, which is easier to debug

5. Other

  • Bugfix: The Console and Source panels now respond to indentation in Settings (2 Spaces, 4 Spaces, or Tab)
  • Keyboard: add shortcut keys for moving the cursor up and down when browsing code (Ctrl+P move up one line, Ctrl+N move down one line)

English good students can directly see the official update log, address: developers.google.com/web/updates…