Выполнение JavaScript в браузере Chrome

В этой главе рассказывается, как запускать и отлаживать код JavaScript в браузере Chrome.

Chrome — это бесплатный веб-браузер, разработанный Google, и он очень удобен для фронтенд-разработки (особенно для отладки кода).

Официальный сайт Chrome:https://www.google.com/intl/zh-CN/chrome/。

В браузере Chrome мы можем нажать кнопкуF12или щёлкнуть правой кнопкой мыши по странице и выбрать"Inspect", чтобы открыть инструменты разработчика.

Вы также можете выбрать в строке меню в правом верхнем углу"More Tools" => "Developer Tools", чтобы открыть:

1. Отладка кода JavaScript в окне Console

После открытия инструментов разработчика мы можем отлаживать код JavaScript в окне Console, как показано ниже:

На рисунке выше мы>вводим код, который хотим выполнить, после символаconsole.log("example"), и нажимаем Enter для выполнения.

Мы также можем скопировать фрагмент кода из другого места, чтобы выполнить его; например, скопируйте следующий код в окно Console и нажмите Enter для выполнения:

console.log("example-1")
console.log("example-2")

Чтобы очистить содержимое окна Console, можно нажать следующую кнопку:

2. Небольшие скрипты Chrome Snippets

Мы также можем создать скрипт в браузере Chrome для выполнения. В инструментах разработчика нажмите панель Sources, выберите вкладку Snippets, щёлкните правой кнопкой мыши в навигаторе и затем выберите Create new snippet, чтобы создать новый файл скрипта:

Если вы не видите Snippets, можно нажать кнопку на панели ниже>>, и тогда вы её увидите.

После нажатия Create new snippet файл будет создан автоматически. Вам нужно только ввести следующий код в правом окне, затем нажать Command+S (Mac) или Ctrl+S (Windows и Linux), чтобы сохранить изменения.

console.log("example-1")
console.log("example-2")

После сохранения щёлкните правой кнопкой мыши по имени файла и выберите "Run", чтобы выполнить код: