Keyboard Shortcuts Reference. Chrome консоль браузера

Using the Console  |  Tools for Web Developers  |  Google Developers

Technical Writer for Chrome DevTools

Andi is a contributor to WebFundamentals

Meggin is a Tech Writer

Open Web Developer Advocate at Google • Tools, Performance, Animation, UX

Learn how to: open the DevTools Console, stack redundant messages or display them on their own lines, clear or persist output or save it to a file, filter output, and access additional Console settings.

TL;DR

• Open the Console as a dedicated panel or as a drawer next to any other panel.
• Stack redundant messages, or display them on their own lines.
• Clear or persist output between pages, or save it to a file.
• Filter output by severity level, by hiding network messages, or by regular expression patterns.

Opening the Console

Access the Console as a full-screen, dedicated panel:

Or as a drawer that opens next to any other panel:

Open as panel

To open the dedicated Console panel, either:

• Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
• If DevTools is already open, press the Console button.

When you open the Console panel, the Console drawer collapses automatically.

Open as drawer

To open the Console as a drawer next to any other panel, either:

• Press Esc while DevTools is in focus.
• Press the Customize and control DevTools button and then press Show console.

Message stacking

If a message is consecutively repeated, rather than printing out each instance of the message on a new line, the Console "stacks" the messages and shows a number in the left margin instead. The number indicates how many times the message has repeated.

If you prefer a unique line entry for every log, enable Show timestamps from the DevTools settings.

Since the timestamp of each message is different, each message is displayed on its own line.

Working with the Console history

Clearing the history

You can clear the console history by doing any of the following:

• Right-click in the Console and press Clear console.
• Type clear() in the Console.
• Call console.clear() from within your JavaScript code.
• Type Ctrl+L (Mac, Windows, Linux).

Persisting the history

Enable the Preserve log checkbox at the top of the console to persist the console history between page refreshes or changes. Messages will be stored until you clear the Console or close the tab.

Saving the history

Right-click in the Console and select Save as to save the output of the console to a log file.

Selecting execution context

The dropdown menu highlighted in blue in the screenshot below is called the Execution Context Selector.

You'll usually see the context set to top (the top frame of the page).

Other frames and extensions operate in their own context. To work with these other contexts you need to select them from the dropdown menu. For example, if you wanted to see the logging output of an <iframe> element and modify a variable that exists within that context, you'd need to select it from the Execution Context Selector dropdown menu.

The Console defaults to the top context, unless you access DevTools by inspecting an element within another context. For example, if you inspect a <p> element within an <iframe>, then DevTools sets the Execution Context Selector to the context of that <iframe>.

When you're working in a context other than top, DevTools highlights the Execution Context Selector red, as in the screenshot below. This is because developers rarely need to work in any context other than top. It can be pretty confusing to type in a variable, expecting a value, only to see that it's undefined (because it's defined in a different context).

Filtering the Console output

Click the Filter button () to filter console output. You can filter by severity level, by a regular expression, or by hiding network messages.

Filtering by severity level is equivalent to the following:

Additional settings

Open the DevTools settings, go to the General tab, and scroll down to the Console section for further Console settings.

developers.google.com

Keyboard Shortcuts Reference  |  Tools for Web Developers  |  Google Developers

Meggin is a Tech Writer

Technical Writer for Chrome DevTools

This page is a reference of keyboard shortcuts in Chrome DevTools.

You can also find shortcuts in tooltips. Hover over a UI element of DevTools to display its tooltip. If the element has a shortcut, the tooltip includes it.

Keyboard shortcuts for opening DevTools

To open DevTools, press the following keyboard shortcuts while your cursor is focused on the browser viewport:

Global keyboard shortcuts

The following keyboard shortcuts are available in most, if not all, DevTools panels.

Elements panel keyboard shortcuts

Styles pane keyboard shortcuts

Sources panel keyboard shortcuts

Code Editor keyboard shortcuts

Performance panel keyboard shortcuts

Memory panel keyboard shortcuts

Console panel keyboard shortcuts

Accept autocomplete suggestion	Right Arrow or Tab	Right Arrow or Tab
Reject autocomplete suggestion	Escape	Escape
Get previous statement	Up Arrow	Up Arrow
Get next statement	Down Arrow	Down Arrow
Focus the Console	Control+`	Control+`
Clear the Console	Command+K or Option+L	Control+L
Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary	Command+Return	Shift+Enter
Execute	Return	Enter
Expand all sub-properties of an object that's been logged to the Console	Hold Alt then click Expand	Hold Alt then click Expand

developers.google.com

Exception and Error Handling  |  Tools for Web Developers  |  Google Developers

Meggin is a Tech Writer

Flavio is a Full Stack Developer

Page exceptions and JavaScript errors are actually quite useful - if you can get to the details behind them. When a page throws an exception or a script produces an error, the Console provides specific, reliable information to help you locate and correct the problem.

In the Console you can track exceptions and trace the execution path that led to them, explicitly or implicitly catch them (or ignore them), and even set error handlers to automatically collect and process exception data.

TL;DR

• Turn on Pause on Exceptions to debug the code context when the exception triggered.
• Print current JavaScript call stack using console.trace.
• Place assertions in your code and throw exceptions using console.assert().
• Log errors happening in the browser using window.onerror.

Track exceptions

When something goes wrong, open the DevTools console (Ctrl+Shift+J / Cmd+Option+J) to view the JavaScript error messages. Each message has a link to the file name with the line number you can navigate to.

An example of an exception:

View exception stack trace

It's not always obvious which execution path lead to an error. Complete JavaScript call stacks accompany exceptions in the console. Expand these console messages to see the stack frames and navigate to the corresponding locations in the code:

Pause on JavaScript exceptions

The next time an exception is thrown, pause JavaScript execution and inspect its call stack, scope variables, and state of your app. A tri-state stop button at the bottom of the Scripts panel enables you to switch among different exception handling modes:

Choose to either pause on all exceptions or only on the uncaught ones or you can ignore exceptions altogether.

Print stack traces

Better understand how your web page behaves by printing log messages to the console. Make the log entries more informative by including associated stack traces. There are several ways of doing that.

Error.stack

Each Error object has a string property named stack that contains the stack trace:

console.trace()

Instrument your code with console.trace() calls that print current JavaScript call stacks:

console.assert()

Place assertions in your JavaScript code by calling console.assert() with the error condition as the first parameter. When this expression evaluates to false, you will see a corresponding console record:

How to examine stack trace to find triggers

Let's see how to use the tools you've just learned about, and find the real cause of an error. Here's a simple HTML page that includes two scripts:

When the user clicks on the page, the paragraph changes its inner text, and the callLibMethod() function provided by lib.js is called.

This function prints a console.log, and then calls console.slog, a method not provided by the Console API. This should trigger an error.

When the page is run and you click on it, this error is triggered:

Click the arrow to can expand the error message:

The Console tells you the error was triggered in lib.js, line 4, which was called by script.js in the addEventListener callback, an anonymous function, in line 3.

This is a very simple example, but even the most complicated log trace debugging follows the same process.

Handle runtime exceptions using window.onerror

Chrome exposes the window.onerror handler function, called whenever an error happens in the JavaScript code execution. Whenever a JavaScript exception is thrown in the window context and is not caught by a try/catch block, the function is invoked with the exception's message, the URL of the file where the exception was thrown, and the line number in that file, passed as three arguments in that order.

You may find it useful to set an error handler that would collect information about uncaught exceptions and report it back to your server using an AJAX POST call, for example. In this way, you can log all the errors happening in the user's browser, and be notified about them.

Example of using window.onerror:

developers.google.com

Смотрите также

• 
  Рейтинг браузеров мобильных
• 
  Поддержка браузерами flex
• 
  Яндекс браузер чей
• 
  Uc андроид браузер
• 
  Вирус открывает браузер
• 
  Заработок в браузере
• 
  Как заблокировать браузер
• 
  Как разблокировать браузер
• 
  Portable браузер спутник
• 
  Браузер яндекс вики
• 
  Браузер для украины