Reprinted fromBlog.vvvvvvvvvvvvvvv.com/2018/05/28/…

byChrome official articleTranslation, it is suggested to check the Original English. As a programmer, it should be a necessary skill to understand official documents (because the translation contains the translator’s thinking, which may not be able to accurately express the thinking of the original text). Being able to access these ‘core data’ is also a necessary skill

Notes: Video versions of these release Notes will be released around the end of 2018.7

New Chrome 68 developer tools:

  • As you type the expression, the console previews the result.
  • When you type a function, the console shows you the arguments that the function expects.
  • Function autocompletion. After you type a function call, e.gdocument.querySelector('p')The console will show you the functions and properties supported by the return value.
  • ES2017 keywords in the Console(ES2017 Console keywords). Keyword, such asawaitAutocomplete is now supported on the console.
  • Lighthouse 3.0 in the Audits Panel. Faster, more consistent audit, new UI, and new audit tools.
  • BigIntSupport (BigInt support). Try JavaScript’s new arbitrary precision INTEGER on the console
  • Adding Property Paths to the Watch Pane
  • “Show timestamps” moved to Settings.

Run Chrome ://version to check your Chrome version. If you are running a previous version, these features do not exist. If you are running a later version, these features may change. Chrome automatically updates to a new major version about every 6 weeks.

Auxiliary tool console

Chrome 68 brings some new console features for autocompletion and preview

Eager Evaluation

When you type an expression in the console, the console now displays a preview of the expression under your pointer.

Figure 1: Prints the result of the sort() operation before the console explicitly executes it.

Enable Eager Evaluation:

  1. Open the console
  2. Open theConsole setup
  3. Open the Eager Evaluation check box

If the expression has side effects, the developer tool does not evaluate it immediately

Argument Hints

But when you type a function call, the console now shows you the parameters that the function expects.

Figure 2: Several examples of console parameter prompts

Notes:

  • A question mark precedes an argument, for example? options, means that this is aoptionalParameters.
  • An ellipsis precedes the argument, for example. items, means that this is aspreadType parameter.
  • Some functions, for exampleCSS.supports()To accept multiple parameter signatures.

Autocomplete after function executions Autocomplete after function executions

Notes: This feature relies on Eager Evaluation, which needs to be turned on from the console Settings

After the Eager Evaluation is turned on, the console will also show you the properties and functions that are valid after a function is called.

Figure 3: The screenshot above shows the old behavior, and the screenshot below shows the new behavior that supports function completion

ES2017 Keywords in AutoComplete

ES2017 keywords, such as await, now support auto-completion in the console

Figure 4: The console now suggests await on autocomplete UI

Faster, more reliable audits, a new UI, and new audits(Faster, more consistent audits, new UIs, and new audits tools)

Chrome 68 brings Lighthouse 3.0, and this next section brings together some of the big changes, all of which can be found at Announcing Lighthouse 3.0

Faster, more consistent vetting

Lighthouse 3.0 features a new internal review engine, codenamed Lantern, that completes your reviews faster and runs with less variance.

The new UI

Lighthouse 3.0 also brings a new UI, thanks to the collaboration between the Lighthouse and Chrome UX (Research & Design) teams.

Image 5: Lighthouse 3.0’s new reporting UI

New censorship tools

Lighthouse 3.0 also brings four new censorship tools:

  • First Contentful Paint
  • Robots.txt is not valid
  • Use video formats for animated content
  • To Avoid multiple, costly trips to any origin.

BigInt Support

Note: This is not a developer tool feature, but it is a new JavaScript capability that can be played on the console.

Chrome 68 supports a new numeric primitive called BigInt, which allows you to declare an integer number with arbitrary precision. Try it on the console:

Figure 6: An example of BigInt in the console

Add property path to watch Add property path to Watch

While pausing at the breakpoint, right-click a property in the Scope pane and select Add Property Path to Watch to Add the property to the Watch pane.

Figure 7: An example of Add Property path to watch

Thank you PhistucK for your contribution

“Show timestamps” moved to Settings”

beforeConsole SettingsIn theShow timestampsThe checkbox is moved toSettings.

Consider Canary

If you’re using Mac or Windows, consider using Chrome Canary as your default development browser. If you report a bug or change that you don’t like but still exists in Canary, the developer tools team can process your feedback significantly faster.

Note: Canary is the latest version of Chrome and will be released once it is built without testing. This means that Canary crashes from time to time, about once a month, and is usually fixed within a day. You can still use Chrome Stable when Canary crashes.