Как запустить JavaScript-отладчик в Google Chrome?

418

При использовании Google Chrome я хочу отладить некоторый код JavaScript. Как я могу это сделать?

javascript  google-chrome  debugging  google-chrome-devtools 
— Кевин Дридгер
источник
— Берги
— Давут Гюрбуз
— cssyphus,

Ответы:

318

Windows: CTRL- SHIFT- JИЛИ F12

Mac: ⌥- ⌘-J

Также доступно через меню гаечного ключа (Инструменты> Консоль JavaScript):

Консольное меню JavaScript

— Джон Шиэн
источник
23
Я думаю, что ярлык с тех пор изменился на CTRL-SHIFT-J.
— Мартин Ларман
5
или Cmd-Shift-J для Mac. Боже, я люблю эту <kbd>метку. Жаль, что я не могу использовать это в комментариях.
— Anurag
11
Скорее всего, ярлык Mac используется Alt-Cmd-Jв последней сборке Chrome.
— Мэтью Бирн
64
F12это самый простой способ
— Хуан Мендес
Глядя на этот вопрос, я понимаю, насколько мои навыки работы с javascript улучшились с уровня новичков до вполне приличных стандартов
— Камаль Редди
399

Попробуйте добавить это в свой источник:

debugger;

Это работает в большинстве, если не во всех браузерах. Просто поместите его где-нибудь в своем коде, и он будет действовать как точка останова.

— Омер ван Клоэтен
источник
Трудно найти, как называется эта команда, если вы ее забыли!
— Ахмед Фасих
4
Также трудно гуглить по причинам, почему это не всегда работает. Есть ли ограничения на это?
— Seanonymous
2
Чтобы это работало, вам нужно открыть Chrome Developer Tools (нажмите F12 в Windwos / Linux, не знаете ключ на Mac или просто осмотрите элемент). Если у вас открыты Инструменты разработчика, еще одна особенность заключается в том, что вы можете нажать и удерживать кнопку «Обновить», чтобы очистить кэш.
— toon81
2
@CallumRogers Только если ваши пользователи используют ваш сайт с открытыми инструментами разработчика.
— Джош М.
3
@JoshM. Обратите внимание, что оставлять это в производственном коде очень плохо, так как это вызывает проблемы в определенных версиях IE даже для пользователей, у которых нет открытых инструментов разработки.
— Омер ван Клотен
57

Windows и Linux:

Ctrl+ Shift+ Iключи для открытия инструментов разработчика

Ctrl+ Shift+, Jчтобы открыть Инструменты разработчика и привлечь внимание к консоли.

Ctrl+ Shift+ Cдля переключения режима проверки элемента.

Mac:

⌥ + ⌘+ Iключи для открытия инструментов разработчика

⌥ + ⌘+, Jчтобы открыть Инструменты разработчика и привлечь внимание к консоли.

⌥ + ⌘+ Cдля переключения режима проверки элемента.

Источник

Другие ярлыки

— user629309
источник
3
На Mac ярлык для переключения режима проверки элемента - shift ⌘ C (Shift - Command - C)
— Роберто Баррос
15

Нажмите F12функциональную клавишу в браузере Chrome, чтобы запустить отладчик JavaScript, а затем нажмите «Сценарии».

Выберите файл JavaScript сверху и поместите точку останова в отладчик для кода JavaScript.

— Балахандар П
источник
3
F12 не открывает отладчик в моей системе Windows 7 с Chrome 23.0.1246.0 dev-m.
— astletron
+1 для F12, это также работает для IE, FF, Edge. Не нужно изучать Emacs как комбинации клавиш. За исключением Mac.
— Чаба Тот
6

В Chrome 8.0.552 на Mac вы можете найти это в меню View / Developer / JavaScript Console ... или вы можете использовать Alt+ CMD+ J.

— Primc
источник
2

Shift+ Control+ Iоткрывает окно инструментов разработчика. Из нижнего левого второго изображения (которое выглядит следующим образом) откроется / скроется консоль для вас:

Показать консоль

— Premanshu
источник
2

Чтобы открыть выделенную панель «Консоль», либо:

  • Используйте сочетания клавиш
    • В Windows и Linux: Ctrl+Shift +J
    • На Mac: Cmd+ Option+J
  • Выберите значок меню Chrome, меню -> Дополнительные инструменты -> Консоль JavaScript . Или, если инструменты разработчика Chrome уже открыты, pressвкладка «Консоль».

Пожалуйста, обратитесь сюда

— Venkat
источник
1

Для пользователей Mac перейдите в Google Chrome -> Вид меню -> Разработчик -> Консоль JavaScript .

Скриншот

— Neo123
источник
1

Теперь в Google Chrome появилась новая функция. Используя эту функцию, вы можете редактировать свой код в браузере Chrome. (Постоянное изменение кода местоположения)

Для этого нажмите F12 -> Вкладка «Источник» - (справа) -> Файловая система - в этом, пожалуйста, выберите ваше местоположение кода. Затем браузер Chrome запросит у вас разрешение, после чего код станет зеленым. и вы можете изменить свой код, и он также будет отражать ваше местоположение кода (это означает, что это будет постоянное изменение)

Спасибо

— stackinfostack
источник
0

F12 открывает панель разработчика

CTRL + SHIFT + C - откроет инструмент для наведения курсора, где он подсвечивает элементы при наведении курсора, и вы можете щелкнуть его, чтобы отобразить на вкладке элементов.

CTRL + SHIFT + I Открывает панель разработчика с вкладкой консоли

RIGHT-CLICK> Inspect. Щелкните правой кнопкой мыши по любому элементу и нажмите «Inspect», чтобы выбрать его на вкладке «Элементы» панели «Разработчик».

ESC Если вы щелкнете правой кнопкой мыши и осмотрите элемент или аналогичный элемент и окажетесь на вкладке «Элементы», глядя на DOM, вы можете нажать ESC, чтобы переключать консоль вверх и вниз, что может быть хорошим способом использования обоих.

— О.Г. Шон
источник
-5

С консоли в Chrome это можно сделать console.log(data_to_be_displayed).

— Ананд
источник
3
Это не откроет консоль. Это будет только войти в консоль.
— Shaz
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.