This article is reproduced in: Ape 2048 Website ➵ https://www.mk2048.com/blog/blog.php?id=hc0jbj10hj
Reprinted from https://blog.vvvvvvvvvvvvvvv.com/2018/05/28/whats-new-in-devtools-Chrome-68/index.html
From the Chrome articles official translation, it is recommended to view the original English text, as a programmer, read the official document should be an essential skill (translation because the translator includes thinking, not necessarily an accurate expression of original thinking want to express) ?. can get these 'core data' is also an essential skill
Notes: The video release notes about the issue around the end of 2018.7
The new Chrome 68 developer tools:
- Eager Evaluation (? Immediate evaluation).? When you type an expression, the console will preview the results.
- Argument hints (parameter prompts). When you type the function, the console will show the function desired parameters to you.
- Function autocompletion (autocomplete function). You type in a function? Call later, such as
document.querySelector('p'), the console will show you the return value of support functions and properties. - ES2017 keywords in the Console (ES2017 console keyword). Keywords, such as
awaitnow supports auto-complete console. - Lighthouse 3.0 in the Audits panel. Faster, more consistent audit (review), the new UI, and the new review tool.
BigIntsupport (BigInt support). In the JavaScript console to try new arbitrary-precision integer (arbitrary precision plastic figures).- Adding property paths to the Watch pane (increase in the Watch panel Add property path)
- "Show timestamps" moved to Settings ( "Time Stamp" is set to move in).
Notes: Run chrome://versionto check your Chrome version if you're running a previous version, these features will not exist if you are running a later version (Translator's Note: The current version of the new ratio). These features are likely to be changed . Chrome automatically updates approximately every six weeks to a new major version.
Aids console
Chrome 68 brings some new characteristics with respect to the console auto-completion and previewing
Eager Evaluation (immediate evaluation)
When you type an expression in the console when the console can now display a preview of the results of this expression in your pointer below.
Picture 1: will be printed before the definitive console execution sort()result of the operation.
Open Eager Evaluation (immediate evaluation):
- Open the console
- Open the Console Settings
- Open Eager evaluation check box
If the expression has side effects , developer tools will not be evaluated immediately
Argument hints (parameter prompts)
But when you type in a function call, the console now displays the function desired parameters to you.
Picture 2: A few examples of the console prompt parameters
Notes:
- A question mark in front of parameters, for example
?options, a representative of which is an optional parameter. - Before an ellipsis parameters, for example
...items, which it is representative of a spread type parameter. - Some functions, for example
CSS.supports(), accepts multiple parameter signature.
Autocomplete after function executions (autocomplete after the function call)
Notes: This feature relies Eager Evaluation (immediate evaluation), which need to open settings from the console
After open Eager Evaluation (immediate evaluation), the console will be displayed after the call to a function, its effective properties and functions to you.
Picture 3: The screenshot above shows the old behavior, the screenshot below shows the new behavior support function completion of
ES2017 keywords in autocomplete (ES2017 keyword completion)
ES2017 keywords, such as await, in the console now supports auto-completion
Picture 4: The console is now recommended in the autocomplete UI await
Faster, more reliable audits, a new UI, and new audits (faster, more consistent audit (review), the new UI, and the new review tool)
Chrome 68 brings Lighthouse 3.0, the next section of this polymeric some big changes, and all changes see also Announcing Lighthouse 3.0
Faster, more consistent review
Lighthouse 3.0 has a new internal audit engine, codenamed Lantern, faster completion of its review and you have fewer differences at runtime.
The new UI
Lighthouse 3.0 also brings new UI, thanks to cooperation between the Lighthouse and Chrome UX (Research & Design) team.
Picture 5: Lighthouse's new report UI 3.0
New review tool
Lighthouse 3.0 also brings a new review of four tools:
- First Contentful Paint
- robots.txt is not valid (robots.txt file is invalid)
- Use video formats for animated content (for animated content using video formats)
- Avoid multiple, costly round trips to any origin (avoiding multiple expensive and from any source)
BigInt support (BigInt support)
Note: This is not a Developer Tools feature, but this is a new JavaScript capabilities can experience the console.
Chrome 68 supports a new type of digital primitives, called BigInt, BigIntallows you to declare an arbitrary precision integer numbers to try the console:
Picture 6: console one BigIntexample
Add property path to watch (to add a property path Watch)
When pause at the breakpoint, right-click a property in the Scope panel, then choose Add property path to watch to add this property to Watch panel.
Photo 7: Add property path to watchan example
Thanks to the contribution of PhistucK
"Show timestamps" moved to settings ( "Time Stamp" is set to move in)
Previously Console Settings in the Show timestamps check box is moved to Settings .
Consider Canary (considering Canary) (Translator's Note: consider becoming Canary)
If you're using Mac or Windows, consider using Chrome Canary as your default browser development. If you report a you do not like but it still exists in the Canary in bug or change, Developer Tools team can significantly faster processing of your feedback.
Note: Canary is the latest version of Chrome, which will be released once it is build, which means that no test Canary crash from time to time, about once a month and are usually repaired within a day when you can crash in Canary.. continue to use Chrome stable (stable version of Chrome).