DevTools Digest, October 2016

Hey hey, Kayce here, back again for another digest to update you on what's new in DevTools since last month.

New features in the Console

In Chrome 56, which is currently in Canary, the DevTools Console is powered by CodeMirror. This enables a whole bunch of new features, like:

Syntax highlighting as you type. Previously, DevTools could only highlight syntax after a code block had been evaluated.

Matching parenthesis / bracket / brace highlighting. If you've got an extra parenthesis, bracket, or brace, DevTools highlights it red.

mismatched parenthesis

Matching parentheses, brackets, or braces are highlighted grey when your cursor is next to one of them.

matched parentheses

Smart return. When you type out a multi-line code block, DevTools now knows whether to create a new line or execute your code each time you press Enter. For example, suppose you want to evaluate the following for loop in the Console:

for (var i = 0; i < 5; i++) {
  console.log(i);
}

In the past, hitting Enter after typing out the first line would have caused DevTools to evaluate the line, causing an error. To continue the code block to a new line, you would have had to held Shift before pressing Enter. In contrast, now DevTools just automatically continues the code block on a new line after you hit Enter, as you expect it would.

Multiple cursors. Hold Command (Mac) or Control+Alt (Windows, Linux) and then click.

multiple cursors

Canary now highlights non-top contexts red

If you've worked in the Console lately, you might have been bitten by a nasty little bug that was setting the execution context selector to values other than top.

That bug should be now be fixed in Stable, but, just to be safe, the DevTools in Canary (Chrome 56) now warns you that you're not in the top context by highlighting the selector red.

non-top context highlighted red

New user agent: UC Browser

You can now select UC Browser for iOS, Android, or Windows Phone from the Network conditions drawer tab.

UC Browser user agent

Sharing is caring

As always, we'd love to hear your feedback or ideas on anything DevTools related.

  • Ping us at ChromeDevTools on Twitter for brief questions or feedback, or to share new ideas.
  • For longer discussions, the mailing list or Stack Overflow are your best bets.
  • For anything docs related, open an issue on our docs repo.
  • You can always go straight to the team to file a bug or request a feature on Crbug.

Until next month,

Kayce