Отладка JavaScript в Chrome

  1. Отладка приложения, работающего на встроенном сервере
  2. Начать отладку
  3. Отладка приложения, работающего на внешнем веб-сервере
  4. Начать отладку
  5. Отладка асинхронного кода
  6. Отладка рабочих
  7. Отлаживать рабочие

WebStorm предоставляет встроенный отладчик для вашего клиентского JavaScript-кода, который работает с Chrome. Видео и приведенные ниже инструкции помогут вам выполнить основные действия, чтобы начать работу с этим отладчиком.

Перед началом настройте встроенный отладчик, как описано в Настройка JavaScript-отладчика , Чтобы изменения, которые вы вносите в код HTML, CSS или JavaScript, немедленно отображались в браузере без перезагрузки страницы, активируйте функцию Live Edit. Видеть Live Edit в HTML, CSS и JavaScript для деталей.

Отладка приложения, работающего на встроенном сервере

WebStorm имеет встроенный веб-сервер, который можно использовать для предварительного просмотра и отладки вашего приложения. Этот сервер всегда работает и не требует никакой ручной настройки. Все файлы проекта обслуживаются на встроенном сервере с корневым URL-адресом http: // localhost: <порт встроенного сервера> / <корень проекта> в соответствии со структурой проекта.

Начать отладку

  1. Установить контрольные точки в коде JavaScript, как требуется.

  2. Откройте файл HTML, который ссылается на JavaScript для отладки, или выберите файл HTML в Окно инструментов проекта ,

  3. Из контекстного меню редактора или выбора выберите Debug <HTML_file_name>. WebStorm генерирует конфигурацию отладки и через нее запускает сеанс отладки. Файл открывается в браузере, а Окно инструмента отладки появляется.

  4. В окне инструмента отладки действуйте как обычно: пройти программу , остановиться и возобновить выполнение программы, изучить его, когда приостановлено , просмотреть актуальный HTML DOM , и так далее

Отладка приложения, работающего на внешнем веб-сервере

Часто вам может потребоваться отладка клиентского JavaScript, работающего на внешнем веб-сервере разработки, например, на платформе Node.js.

Начать отладку

  1. Установить контрольные точки в коде JavaScript, как требуется.

  2. Запустите приложение в режиме разработки. Зачастую вам нужно запустить npm start для этого. Когда сервер разработки будет готов, скопируйте URL-адрес, по которому приложение работает в браузере - вам нужно будет указать этот URL-адрес в конфигурации запуска / отладки.

  3. Создайте конфигурацию отладки типа JavaScript Debug: в главном меню выберите, нажмите Создайте конфигурацию отладки типа JavaScript Debug: в главном меню выберите, нажмите   на панели инструментов и выберите JavaScript Debug из списка на панели инструментов и выберите JavaScript Debug из списка. в Настройка запуска / отладки: отладка JavaScript В открывшемся диалоговом окне укажите URL-адрес, по которому работает приложение. Этот URL можно скопировать из адресной строки вашего браузера, как описано в шаге 2 выше. Нажмите OK, чтобы сохранить настройки конфигурации.

  4. Выберите вновь созданную конфигурацию из списка «Выбор конфигурации запуска / отладки» на панели инструментов и нажмите Выберите вновь созданную конфигурацию из списка «Выбор конфигурации запуска / отладки» на панели инструментов и нажмите   рядом со списком рядом со списком. URL-адрес, указанный в конфигурации запуска, откроется в браузере и Окно инструмента отладки появляется.

  5. В окне инструмента отладки действуйте как обычно: пройти программу , остановиться и возобновить выполнение программы, изучить его, когда приостановлено , просмотреть актуальный HTML DOM , и так далее.

Видеть Отладка приложений React а также Отладка угловых приложений Например.

Отладка асинхронного кода

WebStorm поддерживает отладку асинхронного клиентского JavaScript-кода. WebStorm распознает точки останова внутри асинхронного кода, останавливается на них и позволяет вам войти в такой код. Как только достигается точка останова внутри асинхронной функции или вы входите в асинхронный код, новый асинхронный вызов элемента из <caller> добавляется на панель Frames вкладки Debugger. WebStorm отображает полный стек вызовов, включая вызывающего и весь путь к началу асинхронных действий.

На рисунке ниже показан пример сеанса отладки JavaScript.

Отладчик останавливается на строке 3 (точка останова), затем на строке 5 (точка останова). При нажатии Step into отладчик остановится на строке 5 (в функции), затем перейдет на строку 6.

Режим асинхронной отладки включен по умолчанию. Чтобы отключить асинхронные трассировки стека, установите для js.debugger.async.call.stack.depth в реестре значение 0.

Отладка рабочих

WebStorm поддерживает отладку Сервисные работники а также Веб-работники , WebStorm распознает точки останова у каждого работника и показывает отладочные данные для него как отдельный поток в Рамка панель на Вкладка отладчик из Окно инструмента отладки ,

Обратите внимание, что WebStorm может только отлаживать преданные работники отладка для общие работники в настоящее время не поддерживается.

Отлаживать рабочие

  1. Установите точки останова в Workers для отладки.

  2. Если вы используете Service Workers, установите флажок Разрешить неподписанные запросы на дебаггер страница выбрана. В противном случае ваши сервисные работники могут быть недоступны во время сеанса отладки:

    В противном случае ваши сервисные работники могут быть недоступны во время сеанса отладки:

  3. Создайте конфигурацию отладки типа JavaScript Debug, как описано выше в Отладка клиентского JavaScript, работающего на внешнем веб-сервере ,

  4. Выберите вновь созданную конфигурацию из списка «Выберите конфигурацию запуска / отладки» на панели инструментов и нажмите «Отладка». Выберите вновь созданную конфигурацию из списка «Выберите конфигурацию запуска / отладки» на панели инструментов и нажмите «Отладка» ,

    Файл HTML, указанный в конфигурации запуска, откроется в выбранном браузере, и Окно инструмента отладки открывается со списком Frames, показывающим всех рабочих:

    Чтобы проверить данные (переменные, наблюдения и т. Д.) Для работника, выберите его поток в списке и просмотрите его данные в переменные а также Часы стекла. Когда вы выбираете другого работника, содержимое панелей обновляется соответствующим образом.

Последнее изменение: 17 сентября 2019 г.

Похожие

Как добавить новое окно поиска в Google Chrome
Если вы используете браузер Google Chrome, то вы знаете, что вы можете выполнять поиск, просто набрав текст в строке URL-адреса. Однако некоторым людям не нравится это делать, и для этих людей есть несколько вариантов добавления окна поиска в ваш браузер. Одним из лучших вариантов является расширение Google Chrome под названием SearchBar. Добавление SearchBar в Google Chrome Существует
Включить плавную прокрутку в Chrome в Windows 8.1 и Windows 10
Нет ничего более разочаровывающего, чем пытаться использовать колесо мыши для прокрутки, а когда содержимое окна браузера останавливается, прокрутите немного, а затем перепрыгните через содержимое, которое хотите прочитать. Я заметил это поведение при использовании Google Chrome на Windows 8.1. Плавная прокрутка - это полезная функция, которая помогает легко читать веб-контент, длина которого превышает полный экран. Эту функцию можно найти практически
Запустите программное обеспечение Microsoft Windows на Mac, Linux и Chrome OS
... накладных расходов на операционную систему Windows, например на виртуальную машину, а это значит, что программы Windows работают на собственной скорости, игры воспроизводятся с полной частотой кадров, и вам не нужно приобретать лицензию Windows. Мохаве Совместимо CrossOver Mac
Как скрыть адреса электронной почты от спам-ботов
Добавление адреса электронной почты на веб-сайт является полезным способом, позволяющим клиентам вступать в контакт. К сожалению, это также способ для «спам-ботов» - программ, которые спамеры используют для сбора адресов электронной почты с веб-сайтов, - для сбора адресов электронной почты для отправки нежелательных сообщений или рекламных объявлений. У продавцов электронной коммерции есть несколько вариантов, чтобы скрыть или скрыть этот адрес электронной почты от программ
Как легко протестировать адаптивный дизайн на мобильных устройствах
... начать с выяснения, какие устройства чаще всего просматривают веб-сайт. Мы делаем это, просматривая отчеты о мобильной аудитории в Google Analytics. Если вы являетесь нашим клиентом, у вас есть это. Если вы не являетесь нашим клиентом и хотите получить помощь в установке на вашем сайте, дайте нам знать Мы рады помочь вам. Перейдите в свой аккаунт Google Analytics для своего веб-сайта и откройте отчеты.
[showads ad = rek3] СЛОВО ВВЕДЕНИЯ Когда я впервые увидел этот смарт-вахту, я сразу понял, что хоч...
[showads ad = rek3] СЛОВО ВВЕДЕНИЯ Когда я впервые увидел этот смарт-вахту, я сразу понял, что хочу его иметь. Вот почему я очень рад, что мне дали тесты, потому что в то же время, когда Gear S2 Classic остановился на моем запястье, я обнаружил, что это умные часы, созданные специально для меня и для каждого дюйма. Начиная с внешнего вида, через систему и возможности. То, как Gear S2 удовлетворил мои потребности, заставляет меня не видеть другие умные часы. По крайней
...
ПРОВЕРКА
Бесплатные онлайн инструменты для разработчиков
... на регулярной основе, поэтому обязательно добавьте этот сайт в закладки. Если вы столкнетесь с ошибкой, я буду очень признателен, если вы отправите мне письмо ( [email protected] ) это объясняет природу вашей ошибки. Пожалуйста, укажите детали, например, какую версию браузера вы используете, и шаги по воспроизведению ошибки. Другие комментарии приветствуются. Пожалуйста, "+1" и / или "Facebook Like" этот сайт, если
10 самых распространенных ошибок разработчиков JavaScript
... отладку проще. Ошибки кода, которые в противном случае были бы проигнорированы или потерпели бы неудачу в режиме без вывода сообщений, теперь будут генерировать ошибки или генерировать исключения, быстрее предупреждая вас о проблемах в коде и направляя вас к их источнику. Предотвращает случайные глобалы. Без строгого режима присвоение значения необъявленной переменной автоматически создает глобальную переменную с этим именем. Это одна из самых распространенных

Комментарии

Существуют ли какие-либо приложения или сайты, которые могут мне помочь?
Существуют ли какие-либо приложения или сайты, которые могут мне помочь? Прочитайте больше а также услуги, которые вы можете использовать Забудьте Google Translate:
Nokia движется в правильном направлении, отправляя свои приложения на другие устройства?
Nokia движется в правильном направлении, отправляя свои приложения на другие устройства? Скажите мне свои мысли в комментариях или на нашем страница на фэйсбуке ,
Но какое приложение может выиграть титул "универсального приложения" для себя?
Но какое приложение может выиграть титул "универсального приложения" для себя? И будет ли дизайн играть роль в этом? Мы сделаем картографическое сравнение двух приложений в серии, как строятся два картографических приложения и какие у них различия. Четыре года назад Google объявил, что у Google Maps более миллиарда пользователей в месяц. На сегодняшний день это число увеличилось еще больше. Один миллиард
«Разрешить отладку по USB?
«Разрешить отладку по USB?» ), Установите флажок «Всегда разрешать с этого компьютера» и выберите «Разрешить» . Скопируйте файл из MIUI Polska на свой телефон Следующим шагом является копирование загруженного ZIP-архива из MIUI Polska во внутреннюю память телефона. Теперь скопируйте ZIP-файл с программным обеспечением MIUI Polska в память вашего телефона. Вам не нужно помещать файл в какую-либо подпапку - просто

Существуют ли какие-либо приложения или сайты, которые могут мне помочь?
Nokia движется в правильном направлении, отправляя свои приложения на другие устройства?
Но какое приложение может выиграть титул "универсального приложения" для себя?
И будет ли дизайн играть роль в этом?
«Разрешить отладку по USB?

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: