Содержание

Отладка приложения JavaScript или TypeScript — Visual Studio

  • Чтение занимает 12 мин

В этой статье

Visual Studio позволяет выполнять отладку кода JavaScript и TypeScript.You can debug JavaScript and TypeScript code using Visual Studio. Вы можете задавать и использовать точки останова, подключать отладчик, проверять значения переменных, просматривать стек вызовов и применять другие функции отладки.You can set and hit breakpoints, attach the debugger, inspect variables, view the call stack, and use other debugging features.

Совет

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free. В зависимости от методов, используемых для разработки приложений, вам может потребоваться установить вместе с Visual Studio рабочую нагрузку

Разработка Node.js.Depending on the type of app development you’re doing, you may need to install the Node.js development workload with Visual Studio.

Отладка серверного скриптаDebug server-side script

  1. Открыв проект в Visual Studio, откройте файл JavaScript с серверным скриптом (например, server.js) и щелкните в области слева, чтобы задать точку останова:With your project open in Visual Studio, open a server-side JavaScript file (such as server.js), click in the gutter to the left gutter to set a breakpoint:

    Точки останова — это один из самых простых и важных компонентов надежной отладки.Breakpoints are the most basic and essential feature of reliable debugging.

    Точка останова указывает, где Visual Studio следует приостановить выполнение кода, чтобы вы могли проверить значения переменных или поведение памяти либо выполнение ветви кода.A breakpoint indicates where Visual Studio should suspend your running code so you can take a look at the values of variables, or the behavior of memory, or whether or not a branch of code is getting run.

  2. Чтобы запустить приложение, нажмите клавишу F5 (или выберите пункт меню Отладка > Начать отладку).To run your app, press F5 (Debug > Start Debugging).

    Выполнение отладчика прервется в установленной точке останова (текущий оператор выделяется желтым цветом).The debugger pauses at the breakpoint you set (the current statement is marked in yellow). Теперь вы можете изучить состояние приложения, наводя указатель мыши на переменные в текущей области и используя окна отладчика, такие как

    Локальные и Контрольные значения. Now, you can inspect your app state by hovering over variables that are currently in scope, using debugger windows like the Locals and Watch windows.

  3. Чтобы продолжить выполнение приложения, нажмите клавишу F5.Press F5 to continue the app.

  4. Если вы хотите использовать Средства Chrome для разработчиков (средства F12), нажмите клавишу F12.If you want to use the Chrome Developer Tools or F12 Tools, press

    F12. С их помощью можно изучить модель DOM и взаимодействовать с приложением с помощью консоли JavaScript.You can use these tools to examine the DOM and interact with the app using the JavaScript Console.

Отладка клиентского скриптаDebug client-side script

Visual Studio обеспечивает отладку на стороне клиента только для Chrome и Microsoft Edge (Chromium).Visual Studio provides client-side debugging support for Chrome and Microsoft Edge (Chromium) only. В некоторых сценариях отладчик автоматически останавливается на точках останова в коде JavaScript и TypeScript, в том числе во внедренных в HTML-файлы скриптах.In some scenarios, the debugger automatically hits breakpoints in JavaScript and TypeScript code and in embedded scripts on HTML files. Сведения об отладке сценария на стороне клиента в приложениях ASP.NET см. в записи блога Отладка JavaScript в Microsoft Edge и этом записи в Google Chrome.For debugging client-side script in ASP.NET apps, see the blog post Debug JavaScript in Microsoft Edge and this post for Google Chrome. См. сведения об отладке TypeScript в ASP.NET Core см. в руководстве по созданию приложения ASP.NET Core с помощью TypeScript.For debugging TypeScript in ASP.NET Core, also see Create an ASP.NET Core app with TypeScript.

Visual Studio поддерживает отладку на стороне клиента только для браузеров Chrome и Internet Explorer.Visual Studio provides client-side debugging support for Chrome and Internet Explorer only. В некоторых сценариях отладчик автоматически останавливается на точках останова в коде JavaScript и TypeScript, в том числе во внедренных в HTML-файлы скриптах.In some scenarios, the debugger automatically hits breakpoints in JavaScript and TypeScript code and in embedded scripts on HTML files. Сведения об отладке сценария на стороне клиента в приложениях ASP.NET см. в записи блога Client-side debugging of ASP.NET projects in Google Chrome (Отладка проектов ASP.NET на стороне клиента в Google Chrome).For debugging client-side script in ASP.NET apps, see the blog post Client-side debugging of ASP.NET projects in Google Chrome.

Для приложений, отличных от ASP.NET, выполните действия, описанные здесь.For applications other than ASP.NET, follow the steps described here.

Подготовка приложения к отладкеPrepare your app for debugging

Если для кода применена минификация или он создан в транспайлере, например в TypeScript или Babel, для оптимизации возможностей отладки следует применить сопоставления источника.

If your source is minified or created by a transpiler like TypeScript or Babel, the use of source maps is required for the best debugging experience. Подключить отладчик к запущенному клиентскому скрипту вы сможете даже без сопоставлений источника.Without source maps, you can still attach the debugger to a running client-side script. Но в этом случае вы сможете задавать и использовать точки останова только в файле с минифицированным или созданным в транспайлере кодом, но не в исходном файле кода.However, you may only be able to set and hit breakpoints in the minified or transpiled file, not in the original source file. Например, в приложении Vue.js минифицированный скрипт передается в формате строки в инструкцию eval, и другого способа пошагового выполнения этого кода в отладчике Visual Studio, кроме сопоставлений источника, нет.For example, in a Vue.js app, minified script gets passed as a string to an
eval
statement, and there is no way to step through this code effectively using the Visual Studio debugger, unless you use source maps. В сложных сценариях отладки вы можете использовать также средства для разработчиков в Chrome или средства F12 для Microsoft Edge.In complex debugging scenarios, you might also use Chrome Developer Tools or F12 Tools for Microsoft Edge instead.

Сведения о создании сопоставителей с исходным кодом см. в разделе Создание сопоставлений источника для отладки.For help to generate source maps, see Generate source maps for debugging.

Подготовка браузера к отладкеPrepare the browser for debugging

Для этого сценария используйте Microsoft Edge (Chromium), в настоящее время называемый Microsoft Edge Beta в IDE, или Chrome.For this scenario, use either Microsoft Edge (Chromium), currently named Microsoft Edge Beta in the IDE, or Chrome.

Для этого сценария используйте Chrome.For this scenario, use Chrome.

  1. Закройте все окна целевого браузера.Close all windows for the target browser.

    Другие экземпляры браузера могут препятствовать его открытию при включенной отладке. Other browser instances can prevent the browser from opening with debugging enabled. (Работающие расширения браузера могут препятствовать полному режиму отладки, поэтому для обнаружения неожиданных экземпляров Chrome может понадобиться открыть диспетчер задач).(Browser extensions may be running and preventing full debug mode, so you may need to open Task Manager to find unexpected instances of Chrome.)

    Для Microsoft Edge (Chromium) также отключите все экземпляры Chrome.For Microsoft Edge (Chromium), also shut down all instances of Chrome. Это дает лучшие результаты, поскольку оба браузера используют базу кода Chromium.Because both browsers use the chromium code base, this gives the best results.

  2. Запустите браузер с включенной отладкой.Start your browser with debugging enabled.

    Начиная с Visual Studio 2019 флаг --remote-debugging-port=9222 можно задать при запуске браузера, выбрав Просмотреть с помощью…  > из панели инструментов Отладка, Добавить, а затем установив соответствующий флаг в поле

    Аргументы. Starting in Visual Studio 2019, you can set the --remote-debugging-port=9222 flag at browser launch by selecting Browse With… > from the Debug toolbar, then choosing Add, and then setting the flag in the Arguments field. Используйте другое понятное для браузера имя, например, Microsoft Edge с отладкой или Chrome с отладкой.Use a different friendly name for the browser such as Edge with Debugging or Chrome with Debugging. Подробности см. в заметках о выпуске.For details, see the Release Notes.

    Также можно открыть команду Выполнить кнопки Пуск

    в Windows (щелкнуть правой кнопкой мыши команду Выполнить) и ввести следующую команду:Alternatively, open the Run command from the Windows Start button (right-click and choose Run), and enter the following command:

    msedge --remote-debugging-port=9222

    илиor,

    chrome. exe --remote-debugging-port=9222

    Щелкните правой кнопкой мыши кнопку Пуск Windows, выберите команду Выполнить и введите следующую команду :Open the Run command from the Windows Start button (right-click and choose Run), and enter the following command:

    chrome.exe --remote-debugging-port=9222

    Ваш браузер будет запущен в режиме отладки.This starts your browser with debugging enabled.

    Приложение еще не запущено, поэтому вы видите пустую страницу браузера.The app is not yet running, so you get an empty browser page.

Подключение отладчика к сценарию на стороне клиентаAttach the debugger to client-side script

Чтобы подключить отладчик из Visual Studio и использовать точки останова в коде на стороне клиента, необходимо правильно настроить процесс в отладчике.To attach the debugger from Visual Studio and hit breakpoints in client-side code, the debugger needs help to identify the correct process. Ниже описывается один из способов.Here is one way to enable this.

  1. Перейдите в Visual Studio, а затем установите точку останова в исходном коде, который может быть файлом JavaScript, TypeScript или JSX.Switch to Visual Studio and then set a breakpoint in your source code, which might be a JavaScript file, TypeScript file, or a JSX file. (Выберите для точки останова строку кода, в которой допустимы точки останова, например оператор return или объявление var).(Set the breakpoint in a line of code that allows breakpoints, such as a return statement or a var declaration.)

    Чтобы найти конкретный код в транспонированном файле, используйте Ctrl+F (Изменить > Найти и заменить > Быстрый поиск).To find the specific code in a transpiled file, use Ctrl+F (Edit > Find and Replace > Quick Find).

    Для кода на стороне клиента, чтобы попасть в точку останова в файле TypeScript, .vue или JSX, как правило, необходимо использовать сопоставитель с исходным кодом.For client-side code, to hit a breakpoint in a TypeScript file, .vue, or JSX file typically requires the use of source maps. Сопоставитель с исходным кодом следует правильно настроить, чтобы он поддерживал отладку в Visual Studio.A source map must be configured correctly to support debugging in Visual Studio.

  2. Выберите ваш целевой браузер в качестве целевого объекта отладки в Visual Studio, нажмите клавиши CTRL+F5 (Отладка > Запуск без отладки), чтобы запустить приложение в браузере.Select your target browser as the debug target in Visual Studio, then press Ctrl+F5 (Debug > Start Without Debugging) to run the app in the browser.

    Если вы создали конфигурацию браузера с понятным именем, выберите ее в качестве цели отладки. If you created a browser configuration with a friendly name, choose that as your debug target.

    Приложение откроется в новой вкладке браузера.The app opens in a new browser tab.

  3. Выберите Отладка > Присоединение к процессу.Choose Debug > Attach to Process.

    Совет

    Начиная с Visual Studio 2017, после первого присоединения к процессу с помощью этих инструкций, дальнейшее присоединение можно выполнять с помощью команды Отладка > Повторно подключиться к процессу.Starting in Visual Studio 2017, once you attach to the process the first time by following these steps, you can quickly reattach to the same process by choosing Debug > Reattach to Process.

  4. В диалоговом окне Присоединить к процессу получите отфильтрованный список экземпляров браузера для присоединения.In the Attach to Process dialog box, get a filtered list of browser instances that you can attach to.

    В Visual Studio 2019 выберите правильный отладчик для вашего целевого браузера, JavaScript (Chrome) или JavaScript (Microsoft Edge — Chromium) в поле Присоединить к, введите chrome или edge в поле фильтра, чтобы отфильтровать результаты поиска.In Visual Studio 2019, choose the correct debugger for your target browser, JavaScript (Chrome) or JavaScript (Microsoft Edge — Chromium) in the Attach to field, type chrome or edge in the filter box to filter the search results.

    В Visual Studio 2017 выберите в поле Присоединить к элемент Код Webkit и введите chrome в поле фильтра, чтобы отфильтровать результаты поиска.In Visual Studio 2017, choose Webkit code in the Attach to field, type chrome in the filter box to filter the search results.

  5. Выберите процесс браузера с соответствующим портом узла (localhost в этом примере) и нажмите кнопку Присоединить.Select the browser process with the correct host port (localhost in this example), and select Attach.

    Порт (например 1337) также может отображаться в поле Заголовок, чтобы помочь выбрать правильный экземпляр браузера.The port (for example, 1337) may also appear in the Title field to help you select the correct browser instance.

    В следующем примере показано, как это выглядит в браузере Microsoft Edge (Chromium).The following example shows how this looks for the Microsoft Edge (Chromium) browser.

    Определить, что отладчик присоединился правильно, можно по открытию проводника DOM и консоли JavaScript в Visual Studio.You know the debugger has attached correctly when the DOM Explorer and the JavaScript Console open in Visual Studio. Эти средства отладки аналогичны инструментам Chrome для разработчиков и средствам F12 для Microsoft Edge. These debugging tools are similar to Chrome Developer Tools and F12 Tools for Microsoft Edge.

    Совет

    Если отладчик не присоединяется и появляется сообщение «Не удалось запустить адаптер отладки» или «Не удалось присоединиться к процессу.If the debugger does not attach and you see the message «Failed to launch debug adapter» or «Unable to attach to the process. Операция недопустима в текущем состоянии» — попробуйте закрыть все экземпляры целевого браузера в диспетчере задач перед попыткой запуска целевого браузера в режиме отладки.An operation is not legal in the current state.», use the Windows Task Manager to close all instances of the target browser before starting the browser in debugging mode. Возможно, в браузере выполняются расширения, которые препятствуют переходу в режим полной отладки.Browser extensions may be running and preventing full debug mode.

  6. Обновите страницу браузера, поскольку код с точкой останова возможно уже был выполнен.Because the code with the breakpoint may have already executed, refresh your browser page. При необходимости выполните действия, приводящие к выполнению кода с точкой останова.If necessary, take action to cause the code with the breakpoint to execute.

    Когда отладчик приостановит выполнение, вы можете изучить состояние приложения, наводя указатель мыши на переменные и используя окна отладчика.While paused in the debugger, you can examine your app state by hovering over variables and using debugger windows. Вы также можете выполнять пошаговую отладку кода (клавиши F5, F10 и F11).You can advance the debugger by stepping through code (F5, F10, and F11). Дополнительные сведения об основных функциях отладки см. в разделе Первое знакомство с отладчиком.For more information on basic debugging features, see First look at the debugger.

    В зависимости от типа приложения, выполненных ранее шагов и других факторов, таких как состояние браузера, вы можете попасть в точку останова транскомпилированного файла . js либо исходного файла.You may hit the breakpoint in either a transpiled .js file or source file, depending on your app type, which steps you followed previously, and other factors such as your browser state. В любом случае вы можете выполнять пошаговую отладку кода и просматривать переменные.Either way, you can step through code and examine variables.

    • Если вам нужно декомпозировать код в исходном файле TypeScript, JSX или .vue и вы не можете это сделать, убедитесь, что ваша среда настроена правильно, как описано в разделе Устранение неисправностей.If you need to break into code in a TypeScript, JSX, or .vue source file and are unable to do it, make sure that your environment is set up correctly, as described in the Troubleshooting section.

    • Если вам нужно декомпозировать код в файле с компиляцией в код на языке программирования JavaScript (например, app-bundle.js), но сделать это не удается, удалите файл сопоставления источника filename. js.map.If you need to break into code in a transpiled JavaScript file (for example, app-bundle.js) and are unable to do it, remove the source map file, filename.js.map.

Устранение неполадок точек останова и сопоставителей с исходным кодомTroubleshooting breakpoints and source maps

Если вам нужно декомпозировать код в исходном файле TypeScript или JSX, но сделать это не удается, используйте Присоединить к процессу, чтобы подключить отладчик, как описано в предыдущих этапах.If you need to break into code in a TypeScript or JSX source file and are unable to do it, use Attach to Process as described in the previous steps to attach the debugger. Убедитесь, что ваша среда настроена правильно:Make sure you that your environment is set up correctly:

  • Вы закрыли все экземпляры браузера, включая расширения Chrome (с помощью диспетчера задач) для запуска браузера в режиме отладки.You closed all browser instances, including Chrome extensions (using the Task Manager), so that you can run the browser in debug mode.

  • Обязательно запустите браузер в режиме отладки.Make sure you start the browser in debug mode.

  • Убедитесь, что файл сопоставителя с исходным кодом содержит правильный относительный путь к исходному файлу и не включает неподдерживаемые префиксы, такие как webpack:/// , которые не позволяют отладчику Visual Studio найти исходный файл.Make sure that your source map file includes the correct relative path to your source file and that it doesn’t include unsupported prefixes such as webpack:///, which prevents the Visual Studio debugger from locating a source file. Например, ссылку, подобную webpack:///.app.tsx, можно исправить на ./app.tsx.For example, a reference like webpack:///.app.tsx might be corrected to ./app.tsx. Это можно сделать вручную в файле сопоставителя с исходным кодом (что удобно для тестирования) или с помощью пользовательской конфигурации сборки.You can do this manually in the source map file (which is helpful for testing) or through a custom build configuration. Дополнительные сведения см. в разделе Создание сопоставителя с исходным кодом для отладки.For more information, see Generate source maps for debugging.

Либо, если вам нужно декомпозировать код в исходном файле (например app.tsx), но сделать это не удается, попробуйте использовать оператор debugger; в исходном файле или установите точки останова в инструментах для разработчиков в Chrome (или средства F12 для Microsoft Edge).Alternatively, if you need to break into code in a source file (for example, app.tsx) and are unable to do it, try using the debugger; statement in the source file, or set breakpoints in the Chrome Developer Tools (or F12 Tools for Microsoft Edge) instead.

Создание сопоставлений источника для отладкиGenerate source maps for debugging

В Visual Studio можно использовать и создавать сопоставления источника для исходных файлов JavaScript.Visual Studio has the capability to use and generate source maps on JavaScript source files. Такая возможность часто нужна, когда исходный код минифицирован или создан в транспайлере, например в TypeScript или Babel.This is often required if your source is minified or created by a transpiler like TypeScript or Babel. Доступные варианты зависят от типа проекта.The options available depend on the project type.

  • Проект TypeScript в Visual Studio по умолчанию автоматически создает сопоставления источника.A TypeScript project in Visual Studio generates source maps for you by default. Дополнительные сведения см. в разделе Настройка сопоставлений источника с помощью файла tsconfig.json.For more information, see Configure source maps using a tsconfig.json file.

  • В проекте JavaScript сопоставления источника можно создать с помощью средства упаковки (например, webpack) и компилятора (например, TypeScript или Babel), которые вы можете добавить в проект.In a JavaScript project, you can generate source maps using a bundler like webpack and a compiler like the TypeScript compiler (or Babel), which you can add to your project. Вместе с компилятором TypeScript необходимо добавить еще и файл tsconfig.json и установить опцию компилятора sourceMap.For the TypeScript compiler, you must also add a tsconfig.json file and set the sourceMap compiler option. Пример такой операции на основе базовой конфигурации webpack вы найдете в руководстве по созданию приложения Node.js с использованием React.For an example that shows how to do this using a basic webpack configuration, see Create a Node.js app with React.

Чтобы настроить дополнительные параметры для сопоставлений источника, используйте файл tsconfig.json или параметры проекта для проекта TypeScript, но не оба метода сразу.To configure advanced settings for source maps, use either a tsconfig.json or the project settings in a TypeScript project, but not both.

Чтобы включить отладку с помощью Visual Studio, необходимо убедиться в правильности ссылок на исходный файл в созданном сопоставителе с исходным кодом (может потребоваться тестирование). To enable debugging using Visual Studio, you need to make sure that the reference(s) to your source file in the generated source map are correct (this may require testing). Например, если вы используете webpack, ссылки в файле сопоставителя с исходным кодом включают префикс webpack:/// , который не позволяет Visual Studio найти исходный файл TypeScript или JSX.For example, if you are using webpack, references in the source map file include the webpack:/// prefix, which prevents Visual Studio from finding a TypeScript or JSX source file. В частности, при исправлении для отладки, ссылку на исходный файл (например, app.tsx) следует изменить с webpack:///./app.tsx на ./app.tsx, что включает отладку (путь относительно вашего исходного файла).Specifically, when you correct this for debugging purposes, the reference to the source file (such as app.tsx), must be changed from something like webpack:///./app.tsx to something like . /app.tsx, which enables debugging (the path is relative to your source file). В следующем примере показано, как настроить сопоставители с исходным кодом в webpack, который является одним из наиболее распространенных средств увязки, чтобы они работали с Visual Studio.The following example shows how you can configure source maps in webpack, which is one of the most common bundlers, so that they work with Visual Studio.

(Только для webpack) Если точка останова устанавливается в TypeScript файла JSX (а не в виде файла JavaScript), необходимо обновить конфигурацию webpack.(Webpack only) If you are setting the breakpoint in a TypeScript of JSX file (rather than a transpiled JavaScript file), you need to update your webpack configuration. Например, в файл webpack-config.js может потребоваться заменить следующий код:For example, in webpack-config.js, you might need to replace the following code:

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

следующим кодом:with this code:

  output: {
    filename: ". /app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[resource-path]'  // Removes the webpack:/// prefix
  },

Это настройка только для разработки, позволяющая отладку кода на стороне клиента в Visual Studio.This is a development-only setting to enable debugging of client-side code in Visual Studio.

В сложных сценариях средства браузера (F12) иногда лучше подходят для отладки, так как для них не нужно выполнять изменения в пользовательских префиксах.For complicated scenarios, the browser tools (F12) sometimes work best for debugging, because they don’t require changes to custom prefixes.

Настройка сопоставлений источника с помощью файла tsconfig.jsonConfigure source maps using a tsconfig.json file

Если вы добавите в проект файл tsconfig.json, Visual Studio будет считать корневой каталог проектом TypeScript.If you add a tsconfig.json file to your project, Visual Studio treats the directory root as a TypeScript project. Чтобы добавить файл, щелкните проект правой кнопкой мыши в обозревателе решений и последовательно выберите Добавить > Новый элемент > JSON-файл конфигурации TypeScript.To add the file, right-click your project in Solution Explorer, and then choose Add > New Item > TypeScript JSON Configuration File. Это действие добавит в проект файл tsconfig.json, аналогичный представленному ниже.A tsconfig.json file like the following gets added to your project.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}
Параметры компилятора для tsconfig.jsonCompiler options for tsconfig.json
  • inlineSourceMap. Создает один общий файл с сопоставлениями источников, а не отдельный файл сопоставления для каждого исходного файла.inlineSourceMap: Emit a single file with source maps instead of creating a separate source map for each source file.
  • inlineSources. Помещает исходный код в тот же файл вместе с сопоставлениями источников. Для этого режима также нужно настроить inlineSourceMap или sourceMap.inlineSources: Emit the source alongside the source maps within a single file; requires inlineSourceMap or sourceMap to be set.
  • mapRoot. Указывает расположение, из которого отладчику следует брать файлы сопоставления источника ( .map), вместо расположения по умолчанию.mapRoot: Specifies the location where the debugger should find source map (.map) files instead of the default location. Используйте этот флаг, если во время выполнения файлы .map и файлы .js должны размещаться в разных каталогах.Use this flag if the run-time .map files need to be in a different location than the .js files. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов . map.The location specified is embedded in the source map to direct the debugger to the location of the .map files.
  • sourceMap. Создает соответствующий файл .map.sourceMap: Generates a corresponding .map file.
  • sourceRoot. Указывает расположение, из которого отладчику следует брать файлы TypeScript, вместо расположения по умолчанию.sourceRoot: Specifies the location where the debugger should find TypeScript files instead of the source locations. Используйте этот флаг, если в ходе время выполнения и разработки исходные файлы должны размещаться в разных каталогах.Use this flag if the run-time sources need to be in a different location than the location at design-time. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов.The location specified is embedded in the source map to direct the debugger to where the source files are located.

Дополнительные сведения о параметрах компилятора вы найдете на странице с параметрами компилятора в справочнике по TypeScript.For more details about the compiler options, check the page Compiler Options on the TypeScript Handbook.

Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project)Configure source maps using project settings (TypeScript project)

Также вы можете настроить параметры сопоставления источника в свойствах проекта, щелкнув проект правой кнопкой мыши и выбрав Проект > Свойства > Сборка TypeScript > Отладка.You can also configure the source map settings using project properties by right-clicking the project and then choosing Project > Properties > TypeScript Build > Debugging.

Здесь доступны следующие параметры проекта.These project settings are available.

  • Создать сопоставления источника (эквивалентно sourceMap в tsconfig. json). Создает соответствующий файл .map.Generate source maps (equivalent to sourceMap in tsconfig.json): Generates corresponding .map file.
  • Укажите корневой каталог сопоставлений источника (эквивалентно mapRoot в tsconfig.json). Указывает расположение, из которого отладчику следует брать файлы сопоставления, вместо автоматически созданного расположения.Specify root directory of source maps (equivalent to mapRoot in tsconfig.json): Specifies the location where the debugger should find map files instead of the generated locations. Используйте этот флаг, если во время выполнения файлы .map и файлы .js должны размещаться в разных каталогах.Use this flag if the run-time .map files need to be located in a different location than the .js files. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов сопоставления. The location specified is embedded in the source map to direct the debugger to where the map files are located.
  • Укажите корневой каталог файлов TypeScript (эквивалентно sourceRoot в tsconfig.json). Указывает расположение, из которого отладчику следует брать файлы TypeScript, вместо расположения по умолчанию.Specify root directory of TypeScript files (equivalent to sourceRoot in tsconfig.json): Specifies the location where the debugger should find TypeScript files instead of source locations. Используйте этот флаг, если в ходе выполнения и разработки исходные файлы должны размещаться в разных каталогах.Use this flag if the run-time source files need to be in a different location than the location at design-time. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов.The location specified is embedded in the source map to direct the debugger to where the source files are located.

Отладка JavaScript в динамических файлах с помощью Razor (ASP.NET)Debug JavaScript in dynamic files using Razor (ASP.NET)

Начиная с Visual Studio 2019, Visual Studio обеспечивает отладку только для Chrome и Microsoft Edge (Chromium).Starting in Visual Studio 2019, Visual Studio provides debugging support for Chrome and Microsoft Edge (Chromium) only.

Visual Studio поддерживает отладку только для браузеров Chrome и Internet Explorer.Visual Studio provides debugging support for Chrome and Internet Explorer only.

Однако, вы не сможете автоматически использовать точки останова в файлах, созданных с синтаксисом Razor (cshtml, vbhtml).However, you cannot automatically hit breakpoints on files generated with Razor syntax (cshtml, vbhtml). Для отладки файлов такого типа вы можете применить два следующих подхода.There are two approaches you can use to debug this kind of file:

  • Поместите инструкцию debugger; в той строке, где нужно прервать выполнение. Эта инструкция прерывает выполнение динамического скрипта и начинает отладку сразу же при его создании.Place the debugger; statement where you want to break: This causes the dynamic script to stop execution and start debugging immediately while it is being created.

  • Загрузите страницу и откройте динамический документ в Visual Studio. Чтобы воспользоваться этим методом, нужно открыть динамический файл в процессе отладки, задать в нем точку останова и обновить страницу.Load the page and open the dynamic document on Visual Studio: You’ll need to open the dynamic file while debugging, set your breakpoint, and refresh the page for this method to work. В зависимости от выбранного браузера (Chrome или Internet Explorer) вы сможете найти этот файл с помощью следующих действий.Depending on whether you’re using Chrome or Internet Explorer, you’ll find the file using one of the following strategies:

    Для Chrome откройте пункты меню Обозреватель решений > Документы скриптов > [Имя_нужной_страницы] . For Chrome, go to Solution Explorer > Script Documents > YourPageName.

    Примечание

    Если вы используете Chrome, может появиться сообщение: Источник недоступен между тегами <script> .When using Chrome, you might get a message no source is available between <script> tags. Это нормально, просто продолжайте отладку.This is OK, just continue debugging.

    Для Microsoft Edge (Chromium) используйте ту же процедуру, что и для Chrome.For Microsoft Edge (Chromium), use the same procedure as Chrome.

    Для Internet Explorer откройте пункты меню Обозреватель решений > Документы скриптов > Windows Internet Explorer > [Имя_нужной_страницы] .For Internet Explorer, go to Solution Explorer > Script Documents > Windows Internet Explorer > YourPageName.

Дополнительные сведения см. в руководстве по отладке проектов ASP.NET в браузере Google Chrome на стороне клиента. For more information, see Client-side debugging of ASP.NET projects in Google Chrome.

Настоящий отладчик в JavaScript? Легко!

Об авторе

Дастин Драйвер – журналист и технический писатель, который съел кошку в газетном бизнесе и web-игровой разработке.

Вступление

Конечно, console.log может рассказать вам о многом, но все же сказать, что это отладчик, все равно что сказать, что Канада – это США. Для полноценной отладки вам необходимо отдельное специализированное полнофункциональное приложение. Новый отладчик Firefox позволит вам легко писать быстрый, стабильный код. Вот как это работает.

В этом примере мы отладим очень простое приложение. Здесь вы можете найти приложение на базе фрейморков с открытым исходным кодом. Откройте его в последней версии Firefox Developer Edition, запустите debugger.html  при помощи Option + Cmd + S на Маке или Shift + Ctrl + S на Винде. Отладчик разделен на три функциональные области: навигация по проекту (Source List Pane), код (Source pane) и панель инструментов (tool pane).

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

Прекратите использовать console.log!

Возможно, использование console.log для отладки своего кода для многих кажется привлекательным. Действительно, мы просто пишем вызов функции в нужном месте и получаем значение искомой переменной. Что может быть проще?

Конечно, это работает, но, к сожалению, требует множественного переписывания кода и, честно говоря, банально занимает время. В этом примере я буду использовать debugger.html, чтобы найти значение переменной в нужный момент выполнения программы.

Мы можем использовать debugger.html, чтобы углубиться в особенности работы нашего приложения при помощи простого добавления точек остановок на нужные линии кода. Точки остановки сигнализируют отладчику о том, что в этот момент времени необходимо остановить выполнение кода, так что вы можете навести курсор на код и увидеть все необходимые значения. Здесь мы добавим точку остановки на 13 строку файла app.js.

Теперь давайте добавим задачу в список. Отладчик остановит выполнение всей функции, и мы сможем залезть в код и посмотреть значение выходной функции – и даже больше. Наведите курсор на переменную, и вы увидите всю возможную информацию о ней.

Вы также можете исследовать панель областей видимости, чтобы получить то же самое.

Теперь, когда скрипт остановлен, мы можем «пройтись» по нему, используя панель инструментов. Клавиши play/pause делают ровно то, что мы ожидаем от них, исходя из названия. Step over переходит на следующую строчку кода, исполняя текущую. Step in – проникает внутрь вызова функции. Ну и step out выполняет текущий скрипт целиком и останавливается на следующей точке, если она существует.

Мы также можем использовать панель просмотра выражений, чтобы следить за состоянием переменной. Просто введите выражение в специальное поле и отладчик будет уведомлять вас о состоянии объекта во время всего выполнения кода. В примере вы также можете добавить выражение “title” или “to-do”, и отладчик покажет вам эти значения, если они будут доступными. Это особенно полезно, когда:

  • Вы переходите на следующую строчку и хотите заметить изменение переменной
  • Вы проводите отладку много раз и хотите видеть общие значения
  • Вы пытаетесь понять, почему та чертова кнопка не работает

Также вы можете использовать debugger.html, чтобы отладить React/Redux-приложение. Вот как это работает:

  • Переместитесь к компоненте, которую вы хотите отладить
  • Просмотрите данные о компоненте слева
  • Добавьте точки остановки к нужным функциям
  • Остановите выполнение и проверьте состояние нужных переменных
  • Стек вызова упрощен, так что вы можете увидеть код вашего приложения, чередующегося с фрейморком

И, наконец-то, debugger.html позволит вам увидеть скрытый и минимизированный код для отлавливания ошибок, что, как правило, может быть полезным, когда мы имеем дело с такими общими фрейморками, как React/Redux. Отладчик осведомлен о компонентах, которые вы рассматриваете, и с радостью покажет все в упрощенном стеке вызовов – свойства и прочее. Здесь вы можете увидеть (английским), как использовать отладчик Firefox на примере такого разработчика, как Amit Zur.

Если вы хотите исследовать возможности нового debugger.html, проследуйте в  Mozilla Developer Playground. Мы обладаем целой серией обучающий материалов, которые в полной мере позволят изучить способности отладчика.

Инструменты с открытым исходным кодом

Debugger.html был запущен около 2 лет назад – вместе с полной переработкой всех инструментов разработчика. Мы хотели перестроить DevTools при помощи современных веб-технологий, чтобы сделать их доступными для разработчиков всего мира. И когда у технологии открытый исходный код, любой, кто только пожелает, может принять участие в ее разработке.

JavaScript является обязательным для любого продвинутого веб-приложения, так что появление качественного отладчика было лишь вопросом времени. Мы хотели создать что-то, чтобы это было быстрым, простым в освоении и адаптивным – способным отлаживать любой JS-фреймворк из числа доступных. Потому мы и решили использовать популярные веб-технологии, так как хотели работать сообща с коммьюнити разработчиков. Этот подход также позволит нам улучшить сам отладчик – если мы адаптировали WebPack и начали использовать внутренние инструменты построения и сорс-маппы, мы хотели бы также улучшить и «горячую перезагрузку».

Debugger.html встроен также и в React, Redux, Babel. Компоненты React легковесны, они тестируемы и просты в проектировании. Для быстрого создание ui-элементов мы используем React Storybook. Наши компоненты были оттестированы при помощи Jest и Enzyme, что значительно упростило работу с визуальными интерфейсами. Это также упрощает и работу с различными JavaScript – фреймворками (наподобие React). Наш Babel front-end позволяет совершать отображение классов-компонентов и их функции в левой панели отладчика. Также мы можем делать такие классные вещи, как фиксация точек остановки в функциях, так что они не исчезнут при модификации самой функции.

Действия Redux представляют из себя чистый API для UI, но также могут быть использованы для построения отдельного CLI JS – отладчика. Redux обладает селекторами для выборки текущих состояний отладчика. Наш юнит-тест позволяет запустить Redux – действия и эмулировать ответы браузера. Наши интеграционные тесты запускают браузер в режиме отладки совместно с Redux. По сути, сама функциональная архитектура разработана для того, чтобы быть тестируемой.

Мы полагались и прислушивались к сообществу Mozilla на каждом этапе разработки. Проект был опубликован на GitHub, и наша команда открыла доступ к нему для всех разработчиков по всему миру. Когда мы только начали, автоматические тесты были обязательным компонентов для разработки. Тесты оберегали нас от регрессий. Это и являлось причиной того, почему один из первых этапов разработки требовал создания юнит-тестов для Redux-операций. По факту, общество заверило нас, что наше Flow и Jest-покрытие успешно тестирует каждый файл системы.

Как разработчики, мы верим, что чем мощней и эффективней инструмент, тем больше людей привлечено к его разработке. Наша ключевая команда всегда была маленькой (2 человека), тогда как среднее количество контрибуторов достигало 15 за неделю. Сообщество привнесло перспективу в развитие, что помогло нам преодолеть все трудности и создать такие фичи, о которых мы даже не могли и мечтать. Сейчас мы адаптируем стек вызова для 24 отдельных библиотек, о многих из которых мы раньше даже и не слышали. Также мы оказываем поддержку для WebPack и Angular.

Мы планируем перенести все инструменты разработчика на GitHub, так что в скором времени они будут доступны для более широкой аудитории. Приглашаем и вас внести свой вклад. Вы сможете найти список инструкций, как запускать отладчик на своей машине и как модифицировать его к тому, что вам по душе. Используйте его для отладки кода везде – в браузерах, терминалах, серверах, телефонах, ботах. И если у вас есть идея, как бы еще его можно было бы улучшить, дайте нам знать на GitHub.

Загрузить последнюю версию Firefox вы можете здесь.

 

Автор перевода: Евгений Лукашук

Оригинал статьи

Изучите, как отладить JavaScript с помощью Chrome DevTools | by Roman Ponomarev | devSchacht

Забудьте об отладке при помощи

console. log навсегда! Изучите, как использовать точки останова для отладки кода в инструментах разработчика Chrome

Перевод статьи Brandon Morelli: Learn How To Debug JavaScript with Chrome DevTools. Опубликовано с разрешения автора.

Поиск и исправление ошибок может быть затруднительным. Вы можете поддаться соблазну бесконтрольно использовать console.log(), чтобы заставить ваш код работать правильно. С этим покончено!

Эта статья о правильном пути отладки! Вы узнаете, как использовать инструменты разработчика Chrome для настройки точек останова и исследования кода. Такой подход часто наиболее эффективный способ поиска и исправления ошибок в коде.

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

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

Чтобы воспроизвести ошибку, которую мы собираемся исправлять в ходе данного руководства, следуйте инструкциям ниже:

  • Вот веб-страница, с которой мы будем работать в рамках этой статьи. Открывайте её в новой вкладке: ДЕМО.
  • В демо для Number 1 введите 5.
  • Введите 1 для Number 2.
  • Нажмите Add Number 1 and Number 2.
  • Посмотрите на метку ниже инпутов и кнопки. Она говорит, что 5 + 1 = 51.

Упс. Это неверный результат. Результат должен быть равен 6. Это и есть ошибка, которую мы собираемся исправить.

DevTools позволяет приостановить ваш код посреди его выполнения и получить значения всех переменных в этот момент времени. Инструмент для приостановки кода называется точкой останова. Попробуйте прямо сейчас:

  • Вернитесь к демо и откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux).
  • Перейдите во вкладку Sources.
  • Нажмите Event Listener Breakpoints, чтобы развернуть меню. DevTools раскрывает список категорий событий, таких как Animation и Clipboard.
  • Разверните категорию событий Mouse.
  • Выберите click.
  • Вернувшись к демо, снова нажмите Add Number 1 and Number 2. DevTools приостановит работу и выделит строку кода в панели Sources:
function onClick() {

Почему?

Когда вы выбираете click, вы устанавливаете точку останова на основе всех событий click. Когда происходит клик по любой ноде и эта нода имеет обработчик события click, DevTools автоматически останавливает исполнение на первой строке кода обработчика click для этой ноды.

Одна из распространенных причин ошибок заключается в том, что скрипт выполняется в неправильном порядке. Исследуя код, вы можете выполнять код по одной строке за раз, и выяснить, где именно он выполняется в неожиданном порядке. Попробуйте прямо сейчас:

  • На панели Sources в DevTools нажмите Step into next function call.
кнопка Step into next function call

Эта кнопка позволяет вам осуществить выполнение функции onClick() по одной строке за раз. DevTools остановит выполнение и выделит следующую строку кода:

if (inputsAreEmpty()) {
  • Теперь нажмите кнопку Step over next function call.
кнопка Step over next function call

Это говорит DevTools выполнить функцию inputAreEmpty(), не заходя в неё. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит из-за того, что inputAreEmpty() расценивается как false, поэтому блок кода оператора if не выполняется.

Отладчик | Учебник JavaScript | schoolsw3.com

Обновляется!!! Справочник JavaScript


Ошибки могут (будут) возникать каждый раз, когда вы пишете новый компьютерный код.


Отладка кода

Программный код может содержать синтаксические или логические ошибки.

Многие из этих ошибок трудно диагностировать.

Часто, когда программный код содержит ошибки, ничего не происходит. Сообщения об ошибках отсутствуют, и вы не получите указаний, где искать ошибки.

Поиск (и исправление) ошибок в программном коде называется отладкой кода.


Отладчики JavaScript

Отладка непростая. Но, к счастью, все современные браузеры имеют встроенный отладчик JavaScript.

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

С помощью отладчика вы также можете устанавливать точки останова (места, где выполнение кода может быть остановлено) и проверять переменные во время выполнения кода.

Обычно, в противном случае следуйте инструкциям внизу этой страницы, вы активируете отладку в своем браузере с помощью клавиши F12 и выбираете «Консоль» в меню отладчика.


Метод console.log()

Если ваш браузер поддерживает отладку, вы можете использовать console.log() для отображения значений JavaScript в окне отладчика:


Установка точек останова

В окне отладчика вы можете установить точки останова в коде JavaScript.

В каждой точке останова JavaScript прекращает выполнение и позволяет вам проверять значения JavaScript.

После изучения значений вы можете возобновить выполнение кода (обычно с помощью кнопки воспроизведения).



Ключевое слово debugger

Ключевое слово debugger останавливает выполнение JavaScript и вызовы (если таковые имеются) функции отладки.

Это та же функция, что и установка точки останова в отладчике.

Если отладка недоступна, инструкция отладчика не действует.

Если отладчик включен, этот код перестанет выполняться до того, как выполнит третью строку.


Основные инструменты отладки браузеров

Обычно вы активируете отладку в своем браузере с помощью F12 и выбираете «Консоль» в меню отладчика.

В противном случае выполните следующие действия:

Chrome

  • Откройте браузер.
  • В меню выберите «Дополнительные инструменты».
  • В инструментах выберите «Инструменты разработчика».
  • Наконец, выберите «Консоль».

Firefox

  • Откройте браузер.
  • В меню выберите «Веб-разработчик».
  • Наконец, выберите «Веб-консоль».

Edge

  • Откройте браузер.
  • В меню выберите «Инструменты разработчика».
  • Наконец, выберите «Консоль».

Opera

  • Откройте браузер.
  • В меню выберите «Разработчик».
  • В разделе «Разработчик», выберите «Инструменты разработчика».
  • Наконец, выберите «Консоль».

Safari

  • Перейдите в Safari, Настройки, Дополнительно в главном меню
  • Установите флажок «Включить отображение меню разработки в строке меню».
  • Когда в меню появится новая опция «Разработка»:
    выберите «Показать консоль ошибок».

Вы знали?

Отладка — это процесс тестирования, поиска и устранения ошибок (ошибок) в компьютерных программах.
Первой известной компьютерной ошибкой была настоящая ошибка (насекомое), застрявшая в электронике.


Отладка JavaScript в Google Chrome и Visual Studio Code | by Valery Semenenko | devSchacht

Способность отладки кода является важным навыком разработчика. Важно понимать и использовать широкий спектр инструментов отладки, которые существуют для конкретного языка программирования.

К сожалению, отладка может показаться не столь очевидной при работе с JavaScript за пределами полноценной среды IDE. По крайней мере — на первый взгляд.

В данной статье будет рассмотрен вопрос, как можно выполнять отладку JavaScript-кода в инструменте Google Chrome Dev Tools и в редакторе кода Visual Studio Code.

Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.

Предустановки

В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:

У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков. Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:

Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».

Вы можете запустить приложение из-под Node.js (как это делаю я). Или воспользоваться плагином под Visual Studio Code под названием Live Server.

Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео — Live Server Extension in Visual Studio Code.

Примечание переводчика: видео на английском языке.

В процессе создания данной статьи я добавил в приложении «Quick Chat» небольшую намеренную ошибку, которая не позволяет зарегистрировать пользователя после его входа в систему.

С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value. Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log().

Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью — вы попали по адресу и правильно делаете, что читаете эту статью!

Основы отладки

Начнем с основ. Идея отладки заключается в том, что внутри программного кода можно устанавливать так называемые точки останова (breakpoints) для того, чтобы остановить выполнение программы в определенном месте.

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

После установки точки останова (breakpoint) в коде, как правило, есть несколько вариантов дальнейших действий:

  • продолжить выполнение программы
  • пошагово пройтись по всем этапам выполнения программы — строка за строкой
  • выйти из текущей функции, в которой вы находитесь
  • перейти к выполнению следующей функции

У вас также будет доступ к просмотру стека вызовов (call stack). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.

Отладка в Google Chrome

Чтобы начать отладку приложения в браузере ​​Google Chrome, добавьте в обработчике события кнопки clickBtn оператор debugger, как показано ниже:

Когда выполнение программы дойдет до строки с оператором debugger, приложение будет приостановлено и автоматически активируются инструменты отладки браузера Google Chrome.

Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:

Давайте разберемся, что мы видим на вкладке Sources.

Вкладка Sources

Первое, что вы могли заметить на этой вкладке — это копию исходного кода приложения. Это код, который браузер загрузил и с которым он работает.

Вы также можете заметить, что строка кода с оператором debugger подсвечена синим цветом, чтобы сообщить нам, что выполнение приложения остановлено на данном участке кода:

Браузер Google Chrome предоставляет нам возможность просматривать исходный код приложения. Имея перед собой исходный код, можно установить в нем точки останова.

Точка останова предназначена для обозначения места, на котором нужно остановить выполнение программы. Оператор debugger, который мы использовали в примере выше, функционирует как точка останова, но в исходном коде приложения такая точка останова необязательно должна быть только одной.

Точка останова — преднамеренная остановка или приостановка выполнения программы

Чтобы добавить точку останова, нужно выполнить клик мыши на gutter — поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:

Вкладка Scope

На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости (Local), глобальная область видимости (Global) и раздел сценариев (Script).

В разделе сценариев вы можете отслеживать переменные в области видимости текущего скрипта:

Большую часть времени процесса отладки приложения вы будете проводить именно в этой вкладке. Это гораздо более эффективная альтернатива использованию многочисленным console.log().

Вкладка Watch

Как уже упоминалось ранее, помимо просмотра переменных на вкладке «Scope», вы также можете определить переменные, значения которых вы хотели бы отслеживать на всем этапе выполнения программы.

Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).

Нажмите значок плюса и введите имя переменной, которую необходимо отслеживать, в нашем случае это usernameInput:

Пошаговое выполнение, стек вызовов и список точек останова

Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов (call stack) и т. д.

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

Также обратите внимание на кнопки со стрелками в верхней части экрана. Они соответствуют функциям, указанным выше, для продолжения выполнения вашего кода или прохождения по нему по строкам (stepping). Я бы рекомендовал протестировать немного эти кнопки, чтобы привыкнуть к тому, каким образом можно осуществлять выполнение кода.

Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова (conditional breakpoint), которая будет срабатывать только при выполнении определенного условия.

Например, предположим, что мы хотим предотвратить обработку события на кнопке входа в систему только тогда, когда пользователь пытается войти в систему без ввода имени пользователя.

Мы можем сделать это, щелкнув правой кнопкой мыши на поле gutter и создав точку останова со следующим условием — usernameInput.text === '':

В случае отладки приложения Quick Chat, если вы нажмете кнопку входа в систему без имени пользователя, будет запущена эта точка останова. В противном случае код будет продолжать выполняться как обычно.

Обратите внимание, что существует ещё больше доступных вариантов точек останова, которые не рассматриваются в данной статье.

Отладка в Visual Studio Code

Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.

Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.

Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.

Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome:

Давайте познакомимся с вкладкой Debug. По умолчанию она расположена на боковой панели редактора. Откройте эту вкладку, нажав на значок, который выглядит как жучок (bug).

Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome — переменные, стек вызовов, точки останова:

Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.

Теперь, когда мы познакомились с вкладкой Debug, нам необходимо создать конфигурацию, которая укажет редактору VS Code, как ему отлаживать наше приложение.

VS Code хранит конфигурацию отладки в файле launch.json внутри папки .vscode. Чтобы VS Code создал этот файл для нас, в меню редактора откройте выпадающий список «Нет конфигураций» («No Configurations») и выберите «Добавить конфигурацию» («Add Configuration»).

VS Code хранит конфигурацию отладки в файле с именем launch.json внутри папки .vscode

Затем из этого списка выберите пункт «Chrome»:

Из раскрывающегося списка выберите конфигурацию «Chrome: Launch»:

Конфигурация, которую мы только что создали, будет автоматически подключаться к приложению на определенном порту.

Нам нужно внести небольшое изменение в эту конфигурацию — правильно указать на исходный код тестируемого приложения. Исходный код приложения находится в каталоге public, поэтому необходимо изменить значение свойства «webRoot».

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

Когда конфигурация настроена, можно начать сеанс отладки, нажав зеленую кнопку «Run Code». Приложение должно открыться в окне браузера Google Chrome, как показано ниже.

Обратите внимание на меню отладки кода, которое появилось в фоновом режиме редактора VS Code. С помощью этой панели можно остановить, перезапустить, продолжить выполнение кода или использовать пошаговые возможности для навигации по коду и взаимодействия с отладчиком:

С запущенным отладчиком вы можете установить контрольную точку в коде так, как мы это делали в Google Chrome. Для этого нажмите на поле gutter рядом с номером нужной строки. Я устанавливаю точку останова в том же месте, что и раньше, внутри обработчика события входа в систему.

Теперь если попытаться войти в систему без заданного имени пользователя, точка останова должна инициировать переход в редактор VS Code для дальнейшего анализа кода приложения:

Вся функциональность отладчика кода, которую мы рассмотрели в браузере Google Chrome, аналогична той, что и в редакторе VS Code.

Если вы хотите добавить условную точку останова, щелкните правой кнопкой мыши на поле gutter и выберите «условная точка останова» с определенным условием.

Если вы хотите отследить значения какой-либо переменной, нажмите знак «плюс» чтобы добавить новую переменную и введите имя этой переменной.

Если вы хотите изучить переменные, перейдите на вкладку переменных и исследуйте их!

Вывод

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

Отладка — одна из тех тем, для изучения которой потребуется время и силы, прежде чем начинать работу. Но в конечном итоге потраченные усилия однозначно окупят себя.

Моя рекомендация — потратить некоторое время на изучение отладки как в браузере Google Chrome, так и в редакторе Visual Studio Code и посмотреть, что вам больше нравится. Если у вас есть какие-либо вопросы или комментарии, найдите меня в Twitter.

Google Chrome Javascript отладчик и скрипты контента



Этот вопрос уже задавался подобным образом раньше, но я не могу отладить Javascript в Google Chrome.

Если я перейду на страницу > разработчик «Debug Javascript» ( Ctrl + Shift + L ) отключен. Alt + ` не работает.

Я разрабатываю расширение ‘content script’, поэтому запускаю chrome с --enable-extensions .

Что бы я в идеале хотел сделать, так это установить точки останова и шагать/запускать мой скрипт по мере его выполнения. Я немного не в себе, когда дело доходит до JavaScript,так что любое руководство приветствуется.

Я могу добраться до ‘JavaScript Console,’, но не могу найти скрипты содержимого внутри него. Я также не уверен, чем это отличается от ‘JavaScript Debugger.’

Я использую последнюю сборку Dev Chrome (2.0.181.1) на Windows XP.

javascript google-chrome script-debugging
Поделиться Источник Clayton Hughes     21 мая 2009 в 23:17

4 ответа




47

Поместите следующую команду в свой сценарий:

debugger;

Это запустит отладчик Javascript, когда он доберется до этой точки

Поделиться Rory     13 октября 2010 в 10:39



41

Все эти ответы, похоже, устарели, и поскольку это высоко ценится в google, вот ответ up-to-date:

В Chrome нажмите CTRL+SHIFT+i , чтобы открыть инструменты разработчика.

Выберите ‘Sources’

Нажмите на маленькую стрелку, которая позволяет вам выбрать один из сценариев

Затем выберите ‘Content scripts’

Затем вам нужно будет узнать идентификатор вашего расширения (доступный на странице chrome manage extensions), чтобы добраться до ваших скриптов и отладить их в обычном режиме.

Поделиться soupy1976     12 февраля 2014 в 17:15



8

Щелкните правой кнопкой мыши и выберите пункт Проверить элемент, там вы найдете отладчик JS среди других инструментов отладки. Отладчик JS должен позволять вам устанавливать точки останова и т. д.

Поделиться Scott     21 мая 2009 в 23:36




3

Все, что вам нужно сделать, это включить расширение, а затем в Chrome нажать «Developer» -> «Javascript Console». Затем перейдите на вкладку «Scripts». После этого вы должны увидеть список всех загруженных скриптов чуть ниже. Вы увидите скрипты для текущей страницы, а также все скрипты для любых установленных вами расширений. (Если вы не видите никаких сценариев в списке после открытия консоли, возможно, вам придется обновить его)

Похоже, что всем расширениям Chrome присваивается уникальный ID. Вы можете узнать свой ID, просмотрев страницу расширений Chrome в режиме разработчика.

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

Здесь вы найдете гораздо больше информации об инструментах Chrome Dev: http://www.chromium.org/инструменты разработчика

Поделиться sym3tri     02 июля 2010 в 06:17


Похожие вопросы:


Как заставить отладчик скриптов Chrome перезагрузить javascript?

Мне очень нравится возможность редактировать javascript в отладчике chrome, однако я нахожу, что может быть очень проблематично заставить отладчик повторно извлечь JavaScript с сервера. Иногда мне…


Есть ли способ запустить скрипт контента Google Chrome после загрузки DOM, но до того, как будут выполнены какие-либо скрипты страниц?

Мне нужно удалить скрипт со страницы до того, как он будет выполнен, потому что он мешает моему скрипту… Если я установлю run_at в document_start, у меня не будет доступа к DOM, потому что он не…


Работают ли скрипты контента по-прежнему, если javascript отключен на сайте?

Если я отключу javascript на сайте с помощью настроек Chrome javascript, не помешает ли это расширениям запускать на нем скрипты контента ?


Скрипты контента на предварительно созданных страницах?

Вводятся ли Скрипты контента (http://code.google.com/chrome/extensions/content_scripts.html) в предварительно созданные страницы (document.webkitVisibilityState== ‘prerender’) ? Я читал…


Доступ / манипулирование скриптами контента через консоль в Google Chrome/Firefox Addon

Через консоль google chrome и веб-консоль Mozilla Firefox мы можем получить доступ к состоянию javascript любой страницы и управлять им. Но можно ли получить доступ к скриптам контента, работающим в…


Много (программных) записей в раскрывающемся списке Скрипты в инструментах разработчика в Google Chrome

В последнее время я заметил, что для отладки моего JavaScript любые точки останова, которые я помещаю в файлы сценариев, не попадают в отладчик. Похоже, что скрипты дублируются и перечислены под…


Есть ли функция JavaScript, чтобы заставить Google Chrome проникнуть в отладчик?

Я ищу что-то вроде Debugger.Launch() в .NET, которое программно врывается в отладчик. Я не ищу кроссбраузерный способ сделать это, просто Google Chrome достаточно хорош.


Webpack и программно вводимые скрипты контента

Я разрабатываю расширение Chrome с использованием React и Webpack. В этом проекте различные модули будут программно вводить скрипты контента с использованием chrome.tabs.executeScript(null, {file:…


Скрипты контента в будущих приложениях Chrome?

Я только что прочитал новость о том, что Google не будет поддерживать упакованные приложения Chrome Как будут функционировать приложения, основанные на скриптах контента? Например : блокировщики…


скрипты контента chrome и newtab

Я не могу запустить свой скрипт контента на новой вкладке (где он не назначен ни одному url). Я просмотрел различные посты на эту тему, т. е. имеет ли content script доступ к странице newtab? и что…

Отладка — Начало Работы | Node.js

Edit on GitHub

Это руководство поможет вам начать отладку ваших приложений и скриптов Node.js.

При запуске с аргументом --inspect процесс Node.js прослушивает клиент отладки. По умолчанию клиент прослушивается на хосте 127.0.0.1 с портом 9229. Каждому процессу также назначается уникальный UUID.

Клиенты инспектора должны знать и указывать адрес хоста, порт и UUID для подключения. Полный URL будет выглядеть примерно так: ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e.

Процесс Node.js также начнет прослушивать сообщения отладки, если он получит сигнал SIGUSR1. (SIGUSR1 не доступен в среде Windows.) В Node.js версии 7 и ниже это активирует устаревший Debugger API. В Node.js версии 8 и выше будет активирован Inspector API.


Так как дебаггер имеет полный доступ к среде выполнения Node.js, злоумышленник, способный подключиться к этому порту, сможет выполнить произвольный код от имени процесса Node. Поэтому важно понимать последствия для безопасности при обличении порта отладчика в публичных и частных сетях.

Если отладчик привязан к какому-либо публичному IP-адресу, или к 0.0.0.0, любой клиент, способный достичь вашего IP-адреса сможет подключиться к отладчику без каких-либо ограничений и сможет запускать произвольный код.

По умолчанию node --inspect привязывается к 127.0.0.1. Чтобы разрешить внешние подключения, вы должны явно предоставить общедоступный IP-адрес или 0.0.0.0 и т.д. Однако это может подвергнуть приложение потенциально значительной угрозе его безопасности. Мы предлагаем вам обеспечить наличие файрволов и других соответствующих средств контроля доступа для того, чтобы предотвратить такую угрозу.

См. раздел ‘Включение сценариев удаленной отладки’, который включает рекомендации о том, как безопасно подключить удаленные клиенты отладчика.

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

Веб-сайты, открытые в веб-браузере, могут отправлять запросы WebSocket и HTTP в соответствии с моделью безопасности браузера. Начальное HTTP-соединение необходимо для получения уникального идентификатора сеанса отладчика. Правило ограничения домена (Same Origin Policy) не позволяет веб-сайтам устанавливать это HTTP-соединение. Для дополнительной защиты от атак DNS rebinding Node.js проверяет, что заголовки ‘Host’ для соединения точно указывают IP-адрес, localhost или localhost6.

Эти политики безопасности запрещают подключение к удаленному серверу отладки c указанием имени хоста. Вы можете обойти это ограничение, указав либо IP-адрес, либо используя ssh-туннели, как описано ниже.

Несколько коммерческих и открытых инструментов могут подключаться к инспектору Node.js. Основная информация по ним:

  • Отладчик CLI, поддерживаемый Фондом Node.js, который использует Протокол Инспектора.
  • Соответствующая версия собирается вместе с Node.js, можно использовать с помощью команды node inspect myscript.js.
  • Последняя версия также может быть установлена независимо (например, npm install -g node-inspect) и использоваться через node-inspect myscript.js.
  • Вариант 1: Откройте chrome://inspect в браузере на основе Chromium или edge://inspect в браузере Edge. Нажмите кнопку Configure и убедитесь, что нужные вам хост и порт перечислены в списке.
  • Вариант 2: Скопируйте значение devtoolsFrontendUrl из вывода /json/list (curl http://localhost:9229/json/list) или текст подсказки —inspect и откройте его в Chrome.
  • На панели «Отладка» (Debug) щелкните значок настроек, чтобы открыть файл .vscode/launch.json. Выберите «Node.js» для первоначальной настройки.
  • Создайте новую конфигурацию отладки Node.js и нажмите кнопку «Debug» (Shift+F9). --inspect будет использоваться по умолчанию для Node.js 7+. Чтобы отключить, снимите флажок js.debugger.node.use.inspect в реестре IDE.
  • Библиотека для облегчения подключения к эндпоинтам Протокола Инспектора.
  • Открыв файл .js, выберите «Debug As… > Node program», или
  • Создайте конфигурацию отладки, чтобы присоединить отладчик к запущенному приложению Node (уже запущенному с --inspect).

Аргументы командной строки

В следующей таблице перечислено влияние различных runtime флагов при отладке:

ФлагЗначение
—inspect
  • Включить инспектор
  • Прослушивать адрес и порт по умолчанию (127.0.0.1:9229)
—inspect=[host:port]
  • Включить инспектор
  • Прослушивать адрес host (по умолчанию: 127.0.0.1)
  • Прослушивать порт port (по умолчанию: 9229)
—inspect-brk
  • Включить инспектор
  • Прослушивать адрес и порт по умолчанию (127.0.0.1:9229)
  • Прервать выполнение сценария перед началом выполнения пользовательского кода
—inspect-brk=[host:port]
  • Включить инспектор
  • Прослушивать адрес host (по умолчанию: 127.0.0.1)
  • Прослушивать порт port (по умолчанию: 9229)
  • Прервать выполнение сценария перед началом выполнения пользовательского кода
node inspect script.js
  • Запустить дочерний процесс для выполнения пользовательского скрипта под флагом —inspect; использовать основной процесс для запуска отладчика CLI.
node inspect --port=xxxx script.js
  • Запустить дочерний процесс для выполнения пользовательского скрипта под флагом —inspect; использовать основной процесс для запуска отладчика CLI.
  • Прослушивать порт port (по умолчанию: 9229)

Мы рекомендуем, чтобы отладчик никогда не прослушивал общедоступный IP-адрес. Если вам необходимо разрешить удаленные подключения для отладки, мы рекомендуем использовать SSH-тунелли. Следующий пример предоставляется только в целях иллюстрации возможностей. Вы должны понимать все риски информационной безопасности, связанные с предоставлением удаленного доступа к привилегированной службе.

Допустим вы запускаете на удаленной машине, remote.example.com, приложение Node, которое вы хотите отлаживать. На этой машине следует запустить процесс Node с инспектором, прослушивающим только localhost (по умолчанию).

node --inspect server.js

Теперь вы можете настроить ssh-туннель на локальном компьютере, с которого вы хотите инициировать подключение клиента отладки.

ssh -L 9221:localhost:9229 [email protected]

Это запустит сессию ssh, в которой соединение с портом 9221 на вашем локальном компьютере будет перенаправлено к порту 9229 на remote.example.com. Теперь вы можете подключить к localhost:9221 отладчик, такой как Chrome DevTools или Visual Studio Code, у которого будет возможность отладки так, как если бы приложение Node.js работало локально.


Debugger API устарело начиная с Node.js версии 7.7.0. Вместо него следует использовать Inspector API с флагом —inspect.

При запуске с флагом —debug или —debug-brk в версии 7 или ниже, Node.js прослушивает команды отладки, определенные протоколом отладки V8, на порту TCP (по умолчанию 5858). Любой клиент отладки, который понимает этот протокол, может подключиться и отладить работающий процесс; пара популярных клиентов перечислены ниже.

Протокол отладки V8 более не поддерживается и не документируется.

Встроенный отладчик

Введите node debug script_name.js для запуска скрипта со встроенным CLI отладчиком. Сам скрипт будет запущен с флагом --debug-brk в другом процессе Node, а первоначальный процесс Node запускает скрипт _debugger.js и подключается к целевому скрипту.

Отлаживайте приложение Node.js с помощью Chrome DevTools используя промежуточный процесс, который переводит протокол инспектора, используемый в Chromium, в протокол отладчика V8, используемый в Node.js.

Полное руководство по отладке JavaScript

Всего несколько недель до открытия 2021 JavaScript Full-Stack Bootcamp .
Записывайтесь в лист ожидания!


Отладка — один из тех навыков, которые лежат в основе деятельности программиста.

Иногда мы делаем все, что в наших силах, но программа работает некорректно, например дает сбой, работает медленно или выводит неверную информацию.

Что вы делаете, если написанная вами программа ведет себя не так, как вы ожидаете?

Вы начинаете отладку.

Выясняем, где могла быть ошибка

Первый шаг — всегда смотреть на то, что происходит, и пытаться определить, в чем проблема. Это проблема окружающей среды? Проблема в вводе, которое вы дали программе? Это единовременный сбой из-за слишком большого использования памяти? Или это происходит каждый раз, когда вы его запускаете?

Это ключевая информация, чтобы начать двигаться в правильном направлении при выяснении проблемы.

Как только вы поймете, откуда взялась ошибка, вы можете начать проверку этой конкретной части кода.

Прочитать код

Самый простой способ отладки, по крайней мере с точки зрения инструментов, — это прочитать написанный вами код. Вслух. В том, чтобы услышать наш собственный голос, есть нечто волшебное, чего не происходит, когда вы читаете в тишине.

Часто я обнаруживал проблемы таким образом.

Использование консоли

Если чтение кода вам ничего не говорит, следующий логический шаг — начать добавлять в код несколько строк, которые могут пролить свет.

В коде внешнего интерфейса JavaScript вы часто будете использовать консоль alert (), и .журнал (и его крутые друзья).

Рассмотрим эту строку:

  const a = calculateA ()
const b = вычислитьB ()
const результат = a + b
  

Каким-то образом результат вычисляется неправильно, поэтому вы можете начать с добавления предупреждения (а) и предупреждения (б) перед вычислением результата, и браузер откроет две панели предупреждений при выполнении кода.

  const a = calculateA ()
const b = вычислитьB ()
предупреждение (а)
предупреждение (б)
const результат = a + b
  

Это отлично работает, если то, что вы передаете в alert () , является строкой или числом.Как только у вас есть массив или объект, все становится слишком сложно для alert () , и вы можете использовать консольный API. Начиная с console.log () :

  const a = calculateA ()
const b = вычислитьB ()
console.log (а)
console.log (б)
const результат = a + b
  

Значение печатается в консоли JavaScript инструментов разработчика браузера. Для удобства я объясняю здесь отладку в Chrome DevTools, но общие концепции применимы ко всем браузерам с некоторыми различиями в плане поддерживаемых функций.

См. Подробный обзор Chrome DevTools

.

Результат вызовов console.log () выводится на консоль JavaScript. Это инструмент, более или менее общий для всех браузеров:

Этот очень мощный инструмент позволяет печатать сложные объекты или массивы, а также проверять каждое их свойство.

В сообщении Console API вы можете увидеть все параметры и детали работы с ним, поэтому я не буду здесь объяснять все детали.

Отладчик

Отладчик — самый мощный инструмент в инструментах разработчика браузера, он находится на панели Источники :

В верхней части экрана отображается навигатор по файлам.

Вы можете выбрать любой файл и просмотреть его справа. Как мы увидим позже, очень важно устанавливать точки останова.

Нижняя часть — это собственно отладчик.

Точки останова

Когда браузер загружает страницу, код JavaScript выполняется до тех пор, пока не будет достигнута точка останова.

На этом этапе выполнение останавливается, и вы можете все проверить свою запущенную программу.

Вы можете проверить значения переменных и возобновить выполнение программы по одной строке за раз.

Но сначала, что такое точка останова? В своей простой форме точка останова — это инструкция точки останова , помещенная в ваш код. Когда браузер встречает это, он останавливается.

Это хороший вариант при разработке. Другой вариант — открыть файл на панели «Источники» и щелкнуть число в строке, в которую вы хотите добавить точку останова:

Повторный щелчок по точке останова удалит ее.

После добавления точки останова вы можете перезагрузить страницу, и код остановится в этой точке выполнения, когда найдет точку останова.

Когда вы добавляете точку останова, вы можете видеть на панели Breakpoints , что form.js в строке 7 имеет точку останова. Вы можете увидеть там все свои точки останова и временно отключить их.

Есть и другие типы точек останова:

  • Точки останова XHR / выборки : срабатывает при отправке любого сетевого запроса
  • Точки останова DOM : срабатывает при изменении элемента DOM
  • Точки останова приемника событий : срабатывает, когда происходит какое-либо событие, например щелчок мыши

Область применения

В этом примере я установил точку останова внутри прослушивателя событий, поэтому мне пришлось отправить форму для запуска it:

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

Смотреть переменные и выражения

Справа от панели Scope находится панель Watch .

Он имеет кнопку + , которую можно использовать для добавления любого выражения. Например, добавление name напечатает значение переменной name , в примере Flavio . Вы можете добавить name.toUpperCase () , и он напечатает FLAVIO :

Возобновить выполнение

Теперь все сценарии остановлены, так как точка останова остановила выполнение.

Над баннером «Приостановлено на точке останова» есть набор кнопок, которые позволяют изменять это состояние.

Первый — синего цвета. Щелчок по нему возобновляет нормальное выполнение скрипта.

Вторая кнопка — шаг за , и она возобновляет выполнение до следующей строки и снова останавливается.

Следующая кнопка выполняет шаг в операцию : переходит к выполняемой функции, позволяя вам перейти к ее деталям.

Step out наоборот: возвращается к внешней функции, вызывающей эту.

Это основные способы управления потоком во время отладки.

Редактировать скрипты

На этом экране инструментов разработчика вы можете редактировать любой сценарий, даже когда выполнение сценария остановлено. Просто отредактируйте файл и нажмите cmd-S на Mac или ctrl-S в Windows / Linux.

Конечно, изменения не сохраняются на диске, если вы не работаете локально и не настраиваете рабочие области в инструментах разработчика, более сложная тема.

Проверьте стек вызовов

Стек вызовов отлично подходит для того, чтобы увидеть, на скольких уровнях функций вы углубились в код JavaScript.Он также позволяет перемещаться вверх по стеку, щелкая имя каждой функции:

Скрипты черного ящика

Часто вы работаете с библиотеками, в которые не хотите «входить», вы доверяете им и, например, не хотите видеть их код в стеке вызовов. Как и в предыдущем случае для validator.min.js , который я использую для проверки электронной почты.

Я верю, что он выполняет свою работу хорошо, поэтому я могу щелкнуть его правой кнопкой мыши в стеке вызовов и нажать Blackbox script .С этого момента невозможно войти в этот код сценария, и вы с удовольствием работаете только над своим собственным кодом приложения.

Поскольку Node.js построен на том же движке Chrome, v8, вы можете связать 2 и использовать Chrome DevTools для проверки выполнения приложений Node.js.

Откройте свой терминал и запустите

Затем в Chrome введите этот URL: about: // inspect .

Щелкните ссылку Открыть выделенный DevTools для узла рядом с целью узла, и вы получите доступ к узлу.js в браузере DevTools:

Убедитесь, что вы щелкнули по нему, а не по ссылке внизу, так как этот инструмент автоматически повторно подключается к экземпляру Node.js, когда мы его перезапускаем — очень удобно!



2021 JavaScript Full-Stack Bootcamp начнется в конце марта 2021 года. Не упустите эту возможность, подпишитесь на лист ожидания!

Больше руководств по js:

  • Чего следует избегать в JavaScript (плохие части)
  • Отсрочки и обещания в JavaScript (+ Ember.js пример)
  • Как загружать файлы на сервер с помощью JavaScript
  • Стиль кодирования JavaScript
  • Введение в массивы JavaScript
  • Введение в язык программирования JavaScript
  • Полное руководство ECMAScript 2015-2019
  • Понимание обещаний JavaScript
  • Лексическая структура JavaScript
  • Типы JavaScript
  • Переменные JavaScript
  • Список примеров идей для веб-приложений
  • Введение в функциональное программирование с помощью JavaScript
  • Современный асинхронный JavaScript с асинхронностью и ожиданием
  • Циклы и область действия JavaScript
  • Структура данных JavaScript карты
  • Заданная структура данных JavaScript
  • Руководство по шаблонным литералам JavaScript
  • Дорожная карта для изучения JavaScript
  • Выражения JavaScript
  • Откройте для себя таймеры JavaScript
  • Объяснение событий JavaScript
  • Циклы JavaScript
  • Написание циклов JavaScript с использованием карты, фильтрации, сокращения и поиска
  • Цикл событий JavaScript
  • Функции JavaScript
  • Глоссарий JavaScript
  • Объяснение закрытий JavaScript
  • Учебник по функциям стрелок в JavaScript
  • Руководство по регулярным выражениям JavaScript
  • Как проверить, содержит ли строка подстроку в JavaScript
  • Как удалить элемент из массива в JavaScript
  • Как глубоко клонировать объект JavaScript
  • Введение в Unicode и UTF-8
  • Юникод в JavaScript
  • Как сделать первую букву строки заглавной в JavaScript
  • Как отформатировать число как денежное значение в JavaScript
  • Как преобразовать строку в число в JavaScript
  • это в JavaScript
  • Как получить текущую метку времени в JavaScript
  • Строгий режим JavaScript
  • Выражения функции немедленного вызова JavaScript (IIFE)
  • Как перенаправить на другую веб-страницу с помощью JavaScript
  • Как удалить свойство из объекта JavaScript
  • Как добавить элемент в массив в JavaScript
  • Как проверить, не определено ли свойство объекта JavaScript
  • Введение в модули ES
  • Введение в CommonJS
  • Асинхронное программирование JavaScript и обратные вызовы
  • Как заменить все вхождения строки в JavaScript
  • Краткое справочное руководство по синтаксису современного JavaScript
  • Как обрезать ведущий ноль в числе в JavaScript
  • Как проверить объект JavaScript
  • Полное руководство по датам JavaScript
  • Момент.js учебник
  • Точка с запятой в JavaScript
  • Арифметические операторы JavaScript
  • Объект JavaScript Math
  • Создание случайных и уникальных строк в JavaScript
  • Как заставить ваши функции JavaScript «спать»
  • Прототипное наследование JavaScript
  • Исключения JavaScript
  • Как использовать классы JavaScript
  • Поваренная книга JavaScript
  • Цитаты в JavaScript
  • Как проверить адрес электронной почты в JavaScript
  • Как получить уникальные свойства набора объектов в массиве JavaScript
  • Как проверить, начинается ли строка с другой в JavaScript
  • Как создать многострочную строку в JavaScript
  • Руководство ES6
  • Как получить текущий URL в JavaScript
  • Руководство ES2016
  • Как инициализировать новый массив значениями в JavaScript
  • Руководство ES2017
  • Руководство ES2018
  • Как использовать Async и Await с массивом.prototype.map ()
  • Асинхронный код против кода синхронизации
  • Как сгенерировать случайное число между двумя числами в JavaScript
  • Учебное пособие по HTML Canvas API
  • Как получить индекс итерации в цикле for-of в JavaScript
  • Что такое одностраничное приложение?
  • Введение в WebAssembly
  • Введение в JSON
  • Руководство JSONP
  • Стоит ли использовать или изучать jQuery в 2020 году?
  • Как скрыть элемент DOM с помощью простого JavaScript
  • Как объединить два объекта в JavaScript
  • Как очистить массив JavaScript
  • Как закодировать URL-адрес с помощью JavaScript
  • Как установить значения параметров по умолчанию в JavaScript
  • Как отсортировать массив объектов по значению свойства в JavaScript
  • Как подсчитать количество свойств в объекте JavaScript
  • call () и apply () в JavaScript
  • Введение в PeerJS, библиотеку WebRTC
  • Работа с объектами и массивами с помощью Rest и Spread
  • Разрушение объектов и массивов в JavaScript
  • Полное руководство по отладке JavaScript
  • Руководство по TypeScript
  • Динамически выбрать метод объекта в JavaScript
  • Передача undefined в JavaScript Выражения немедленно вызываемой функции
  • Свободно типизированные языки против строго типизированных языков
  • Как стилизовать элементы DOM с помощью JavaScript
  • Приведение в JavaScript
  • Учебное пособие по генераторам JavaScript
  • Размер папки node_modules не является проблемой.Это привилегия
  • Как устранить непредвиденную ошибку идентификатора при импорте модулей в JavaScript
  • Как перечислить все методы объекта в JavaScript
  • Метод String replace ()
  • Метод String search ()
  • Как я запускаю небольшие фрагменты кода JavaScript
  • Руководство ES2019
  • Метод String charAt ()
  • Метод String charCodeAt ()
  • Метод String codePointAt ()
  • Метод String concat ()
  • Метод String EndWith ()
  • Строка включает метод ()
  • Метод String indexOf ()
  • Метод String lastIndexOf ()
  • Метод String localeCompare ()
  • Метод String match ()
  • Метод String normalize ()
  • Метод String padEnd ()
  • Метод String padStart ()
  • Метод String repeat ()
  • Метод String slice ()
  • Метод String split ()
  • Метод String StartWith ()
  • Метод String substring ()
  • Метод String toLocaleLowerCase ()
  • Метод String toLocaleUpperCase ()
  • Метод String toLowerCase ()
  • Метод String toString ()
  • Метод String toUpperCase ()
  • Метод String trim ()
  • Метод String trimEnd ()
  • Метод String trimStart ()
  • Мемоизация в JavaScript
  • Метод String valueOf ()
  • Ссылка на JavaScript: строка
  • Метод Number isInteger ()
  • Метод Number isNaN ()
  • Метод Number isSafeInteger ()
  • Метод Number parseFloat ()
  • Метод Number parseInt ()
  • Метод Number toString ()
  • Метод Number valueOf ()
  • Метод Number toPrecision ()
  • Метод Number toExponential ()
  • Метод Number toLocaleString ()
  • Метод Number toFixed ()
  • Метод Number isFinite ()
  • Ссылка на JavaScript: номер
  • Дескрипторы свойств JavaScript
  • Метод Object assign ()
  • Метод создания объекта ()
  • Метод Object defineProperties ()
  • Метод Object defineProperty ()
  • Метод записи объекта ()
  • Метод Object freeze ()
  • Метод Object getOwnPropertyDescriptor ()
  • Метод Object getOwnPropertyDescriptors ()
  • Метод Object getOwnPropertyNames ()
  • Метод объекта getOwnPropertySymbols ()
  • Метод Object getPrototypeOf ()
  • Метод Object is ()
  • Метод Object isExtensible ()
  • Метод Object isFrozen ()
  • Метод Object isSealed ()
  • Метод Object keys ()
  • Метод Object preventExtensions ()
  • Метод объекта seal ()
  • Метод объекта setPrototypeOf ()
  • Метод значений объекта ()
  • Метод Object hasOwnProperty ()
  • Метод Object isPrototypeOf ()
  • Метод Object propertyIsEnumerable ()
  • Метод Object toLocaleString ()
  • Метод объекта toString ()
  • Метод Object valueOf ()
  • Ссылка на JavaScript: объект
  • Оператор присваивания JavaScript
  • Интернационализация JavaScript
  • Тип JavaScript оператора
  • Новый оператор JavaScript
  • Операторы сравнения JavaScript
  • Правила приоритета операторов JavaScript
  • Экземпляр JavaScript оператора
  • Операторы JavaScript
  • Область действия JavaScript
  • Преобразование типов JavaScript (приведение)
  • Операторы равенства JavaScript
  • Условное выражение if / else в JavaScript
  • Условный переключатель JavaScript
  • Оператор удаления JavaScript
  • Параметры функции JavaScript
  • Оператор распространения JavaScript
  • Возвращаемые значения JavaScript
  • Логические операторы JavaScript
  • Тернарный оператор JavaScript
  • Рекурсия JavaScript
  • Свойства объекта JavaScript
  • Объекты ошибок JavaScript
  • Глобальный объект JavaScript
  • Функция JavaScript filter ()
  • Функция JavaScript map ()
  • Функция JavaScript reduce ()
  • Оператор in в JavaScript
  • Операторы JavaScript
  • Как получить значение свойства CSS в JavaScript
  • Как добавить прослушиватель событий к нескольким элементам в JavaScript
  • Поля частного класса JavaScript
  • Как отсортировать массив по значению даты в JavaScript
  • Поля открытого класса JavaScript
  • Символы JavaScript
  • Как использовать библиотеку JavaScript bcrypt
  • Как переименовать поля при использовании деструктуризации объекта
  • Как проверять типы в JavaScript без использования TypeScript
  • Как проверить, содержит ли массив JavaScript определенное значение
  • Что означает оператор двойного отрицания !! делать в JavaScript?
  • Какой оператор равенства следует использовать при сравнении JavaScript? == против ===
  • Стоит ли изучать JavaScript?
  • Как вернуть результат асинхронной функции в JavaScript
  • Как проверить, пуст ли объект в JavaScript
  • Как выйти из цикла for в JavaScript
  • Как добавить элемент в массив по определенному индексу в JavaScript
  • Почему не следует изменять прототип объекта JavaScript
  • В чем разница между использованием let и var в JavaScript?
  • Ссылки, используемые для активации функций JavaScript
  • Как соединить две строки в JavaScript
  • Как объединить два массива в JavaScript
  • Как проверить, является ли значение JavaScript массивом?
  • Как получить последний элемент массива в JavaScript?
  • Как отправлять данные в кодировке urlencop с помощью Axios
  • Как узнать дату завтрашнего дня с помощью JavaScript
  • Как получить вчерашнюю дату с помощью JavaScript
  • Как получить название месяца из даты JavaScript
  • Как проверить, совпадают ли две даты в один и тот же день в JavaScript
  • Как проверить, относится ли дата к дню в прошлом в JavaScript
  • Операторы, помеченные JavaScript
  • Как дождаться выполнения 2 или более обещаний в JavaScript
  • Как получить дни между двумя датами в JavaScript
  • Как загрузить файл с помощью Fetch
  • Как отформатировать дату в JavaScript
  • Как перебирать свойства объекта в JavaScript
  • Как рассчитать количество дней между двумя датами в JavaScript
  • Как использовать ожидание верхнего уровня в модулях ES
  • Динамический импорт JavaScript
  • JavaScript Необязательная цепочка
  • Как заменить пробел внутри строки в JavaScript
  • Нулевое объединение JavaScript
  • Как сгладить массив в JavaScript
  • Это десятилетие в JavaScript
  • Как отправить заголовок авторизации с помощью Axios
  • Список ключевых и зарезервированных слов в JavaScript
  • Как преобразовать массив в строку в JavaScript
  • Как удалить все содержимое папок node_modules
  • Как удалить дубликаты из массива JavaScript
  • Let vs Const в JavaScript
  • Один и тот же вызов POST API в различных библиотеках JavaScript
  • Как получить первые n элементов в массиве в JS
  • Как разделить массив на несколько равных частей в JS
  • Как замедлить цикл в JavaScript
  • Как загрузить изображение на холст HTML
  • Как разрезать строку на слова в JavaScript
  • Как разделить массив пополам в JavaScript
  • Как написать текст на холсте HTML
  • Как удалить последний символ строки в JavaScript
  • Как удалить первый символ строки в JavaScript
  • Как исправить ошибку TypeError: Невозможно назначить свойство «Export» только для чтения объекта «# », ошибка
  • Как создать всплывающее окно с намерением выхода
  • Как проверить, является ли элемент потомком другого
  • Как принудительно вводить учетные данные для каждого запроса Axios
  • Как устранить ошибку «не функция» в JavaScript
  • Гэтсби, как изменить фавикон
  • Загрузка внешнего файла JS с помощью Gatsby
  • Как определить темный режим с помощью JavaScript
  • Посылка, как исправить ошибку `регенератор Время выполнения не определено`
  • Как определить, используется ли блокировщик рекламы с JavaScript
  • Деструктуризация объектов с типами в TypeScript
  • The Deno Handbook: краткое введение в Deno 🦕
  • Как получить последний сегмент пути или URL-адреса с помощью JavaScript
  • Как перемешать элементы в массиве JavaScript
  • Как проверить, существует ли ключ в объекте JavaScript
  • Возбуждение событий и захват событий
  • событие.stopPropagation против event.preventDefault () против return false в событиях DOM
  • Примитивные типы и объекты в JavaScript
  • Как узнать, к какому типу относится значение в JavaScript?
  • Как вернуть несколько значений из функции в JavaScript
  • Стрелочные функции и обычные функции в JavaScript
  • Как мы можем получить доступ к значению свойства объекта?
  • В чем разница между null и undefined в JavaScript?
  • В чем разница между методом и функцией?
  • Как мы можем выйти из цикла в JavaScript?
  • JavaScript для..из петли
  • Что такое деструктуризация объектов в JavaScript?
  • Что такое подъем в JavaScript?
  • Как заменять запятые на точки с помощью JavaScript
  • Важность тайминга при работе с DOM
  • Как перевернуть массив JavaScript
  • Как проверить, является ли значение числом в JavaScript
  • Как принять неограниченное количество параметров в функции JavaScript
  • Прокси-объекты JavaScript
  • Делегирование событий в браузере с использованием ванильного JavaScript
  • Супер-ключевое слово JavaScript
  • Введение в XState
  • Значения передаются в JavaScript по ссылке или по значению?
  • Пользовательские события в JavaScript
  • Пользовательские ошибки в JavaScript
  • Пространства имен в JavaScript
  • Любопытное использование запятых в JavaScript
  • Цепочка вызовов методов в JavaScript
  • Как справиться с отклонением обещаний
  • Как поменять местами два элемента массива в JavaScript
  • Как я исправил ошибку «cb.»применить не является функцией» ошибка при использовании Gitbook
  • Как добавить элемент в начало массива в JavaScript
  • Gatsby, исправьте ошибку «не удается найти модуль gatsby-cli / lib / reporter»
  • Как получить индекс элемента в массиве JavaScript
  • Как проверить пустой объект в JavaScript
  • Как деструктурировать объект до существующих переменных в JavaScript
  • Структура данных JavaScript массива
  • Структура данных JavaScript стека
  • Структуры данных JavaScript: очередь
  • Структуры данных JavaScript: установить
  • Структуры данных JavaScript: словари
  • Структуры данных JavaScript: связанные списки
  • JavaScript, как экспортировать функцию
  • JavaScript, как экспортировать несколько функций
  • JavaScript, как выйти из функции
  • JavaScript, как найти символ в строке
  • JavaScript, как фильтровать массив
  • JavaScript, как расширить класс
  • JavaScript, как найти дубликаты в массиве
  • JavaScript, как заменить элемент массива
  • Алгоритмы JavaScript: линейный поиск
  • Алгоритмы JavaScript: двоичный поиск
  • Алгоритмы JavaScript: сортировка выбора
  • Алгоритмы JavaScript: быстрая сортировка
  • Алгоритмы JavaScript: сортировка слиянием
  • Алгоритмы JavaScript: пузырьковая сортировка
  • Дождитесь разрешения всех обещаний в JavaScript

  • Как отлаживать ошибки JavaScript

    Отладка ошибок JavaScript в производственной среде может быть сложной задачей.Чаще всего отчеты об ошибках расплывчаты, и определение основных причин может быть в лучшем случае затруднено. Тем не менее, есть несколько общих шагов, которым можно следовать для выявления и устранения ошибок, возникающих в процессе производства.

    Сбор информации

    Шаг 1. Попытка воспроизвести обстоятельства

    При разработке программного обеспечения первым шагом к отладке любой проблемы является попытка воспроизвести обстоятельства. В большинстве языков программирования это подкрепляется просмотром журналов, ведущих к ошибке, но с клиентским JavaScript этот тип диагностики требует значительно большего предвидения (подробнее об этом ниже).

    Прежде чем мы сможем воспроизвести какие-либо обстоятельства проблемы и, если предположить, что у нас есть доступ к каким-либо производственным журналам, нам сначала нужно установить некоторые правила тестирования. Это включает в себя такие вещи, как имитация производственной базы данных, задействованных учетных записей пользователей и даже операционной системы. Здесь все по-честному.

    Шаг 2: Допущения при тестировании

    После того, как вы установили обстоятельства, которые, по вашему мнению, могут вызвать исключение или ошибку, за которыми вы охотитесь, пора их проверить. Никогда не тестируйте исключения в производстве. Среды разработки и промежуточной обработки спроектированы так, чтобы их можно было взломать без какого-либо воздействия на конечных пользователей, поэтому всегда всегда всегда пытайтесь взломать ваш код в безопасной среде.

    Шаг 3. Увеличьте ведение журнала

    Больше информации всегда лучше. Используя методы, описанные в разделе «Где регистрируются ошибки JavaScript?», Первым шагом к диагностике любой проблемы является увеличение объема регистрируемых данных.Это позволяет вам видеть все, что происходит с до и с после , когда возникает проблема. Существует большая вероятность того, что проблемы, с которыми вы столкнулись, связаны с потенциальными предупреждениями, которые не обязательно попадают в журналы по умолчанию.

    Шаг 4. Настройте параметры теста и повторите попытку

    Если вам не удалось воспроизвести проблему на шаге 2, то она вернется к чертежной доске. Не каждую ошибку легко воспроизвести, и она может иметь временные ограничения или что-то еще, что затрудняет воспроизведение в непроизводственной среде.Вернитесь к шагу 1, настройте параметры теста и попробуйте все заново.

    Что такое исходные карты?

    В производственной среде файлы JavaScript часто сжимаются. Хотя это отличный способ ускорить работу любого приложения, он может превратить отладку в кошмар, поскольку файлы, которые вы пытаетесь отлаживать, практически не читаются. Здесь исходные карты вступают в игру. Исходная карта, поддерживаемая большинством современных браузеров, представляет собой файл, который сопоставляет несжатый код сжатому, что позволяет вам точно видеть, что происходит в производственной среде.

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

      // # sourceMappingURL = http: //example.com/path/to/your/sourcemap.map  

    В качестве примера рассмотрим консоль разработчика без включенных исходных карт.В частности, видите ли вы, как в исходном файле написано «Создано с помощью CoffeeScript», а ниже автоматически сгенерирован JavaScript?

    Отладчик консоли разработчика

    Хотя рабочий файл JavaScript можно просматривать и отлаживать, это не тот код, который я написал. Исходный исходный файл написан на CoffeeScript, что означает, что любое понимание, почерпнутое из скомпилированного кода, должно быть переведено обратно в исходный исходный файл.

    Теперь давайте посмотрим на тот же пример с включенными исходными картами:

    Отладчик консоли разработчика

    При включенных исходных картах точка останова в скомпилированном скрипте может быть сопоставлена ​​непосредственно с исходным исходным файлом в CoffeeScript.Это позволяет отлаживать проблемы в контексте исходных файлов, а не скомпилированных и очищенных файлов, которые попадают в производственную среду.

    Трассировки стека в JavaScript

    Каждый раз, когда генерируются исключения, обычно включается трассировка стека. Но что — это трассировка стека? По сути, это краткое изложение каждого файла и функции, которые вызываются до ошибки. Чтобы было ясно, трассировка стека не включает файлы и функции, которые были затронуты до того, как произошла ошибка , а только цепочка методов, которые вызываются при возникновении ошибки.Это позволяет вам «отслеживать» «стек» операций, выполняемых при возникновении ошибки, чтобы точно определить, что и где пошло не так.

    В качестве примера давайте посмотрим на трассировку стека, которая возвращается из следующего (невероятно упрощенного) кода:

      function do_the_thing () {
      выкинуть новую ошибку («что-то случилось!»);
    }
    do_the_thing ();  

    Когда do выполняется вещь (), немедленно генерируется исключение. Это приводит к следующей трассировке стека:

      Ошибка: что-то случилось!
    Трассировки стека:
    do_the_thing @ код оценки отладчика: 2: 9
    Код оценки @debugger: 1: 7  

    Как видите, вместо простого возврата сообщения об исключении чтение трассировки стека в обратном порядке показывает, что исключение было сгенерировано в строке 1 в столбце 7, но было вызвано вызовом для выполнения thing () в строке 2 в столбце 9.Для более сложных трассировок стека это может быть бесценным, поскольку дает нам много посмертной информации.

    Краткое введение в отладчик

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

    Отладчик консоли разработчика

    Отладчик на основе браузера — невероятно мощный инструмент, но основная идея его использования заключается в том, что вы добавляете точки останова в те моменты в вашей кодовой базе, где вы хотите глубже изучить стек и область действия скрипта. Когда отладчик обнаруживает эти точки останова, все выполнение приостанавливается, и вам предоставляется возможность просмотреть значения любых переменных и даже изменить их, чтобы лучше проверить предположения и исправить любые проблемы, с которыми вы можете столкнуться.

    Расширенная отладка

    Важно отметить, что, хотя встроенный отладчик отлично подходит для многих случаев использования, введение более продвинутых платформ JavaScript, таких как Vue.js и Redux, может значительно усложнить использование отладчика. Здесь в игру вступают браузерные плагины, такие как Vue.js devtools и Redux DevTools. Эти инструменты разработаны с учетом сложности их целевых платформ, что позволяет выполнять гораздо более целенаправленную отладку очень сложных кодовых баз.

    Отладка Node.js

    Хотя отладчик браузера отлично подходит для клиентского JavaScript, Node.js поставляется со своим собственным отладчиком для отладки на стороне сервера. Отладка кода Node.js может быть выполнена путем запуска node inspect в исходном файле или с помощью любого количества отличных интеграций IDE, разработанных специально для отладки Node.js.

    Код Visual Studio Отладчик Node.js

    Отладка производственных ошибок с помощью Rollbar

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

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

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

    Телеметрия

    Телеметрия, уникальная для интеграции с JavaScript в Rollbar, представляет собой расширенное средство отслеживания событий, которое позволяет вам определять, что происходит в моменты, предшествующие ошибке и сразу после нее.Это невероятно ценно, так как дает вам возможность увидеть любое поведение, которое могло непреднамеренно привести к возникновению ошибки.

    События

    Каждый раз, когда в ходе HTTP-запроса возникает исключение, детали запроса отслеживаются вместе с любой дополнительной информацией, такой как браузер и операционная система. Это дает вам возможность идентифицировать любые потенциальные проблемы, которые могут быть связаны с конкретными системами, или даже отслеживать параметры запроса-нарушителя.

    Предполагаемое развертывание

    Если вы отслеживаете развертывания в Rollbar, то определить, какое развертывание могло быть причиной новой ошибки или исключения, будет как можно проще. Настолько прост, что Rollbar делает всю работу за вас.

    Интеграция системы управления источниками

    Когда проект Rollbar связан с репозиторием в GitHub, Bitbucket или GitLab, любые ссылки на файлы в трассировке стека автоматически связываются напрямую с файлом-нарушителем в связанном репозитории.

    Отладка JavaScript в Firefox — WebStorm

    С помощью WebStorm вы можете отлаживать клиентский JavaScript в Firefox версии 36 и более поздних, используя функцию удаленной отладки Firefox. Однако настоятельно рекомендуется использовать Chrome или любой другой браузер семейства Chrome по следующим причинам:

    • WebStorm не поддерживает исходные карты во время сеанса отладки в FireFox, который блокирует отладку сжатого или сгенерированного машиной JavaScript.

    • При отладке в Firefox вы не можете предварительно просмотреть изменения кода HTML, CSS или JavaScript на лету — эта функция, известная как Live Edit, поддерживается только в Google Chrome.

    Вы можете отлаживать приложение, работающее на встроенном веб-сервере WebStorm или на внешнем сервере.

    Перед тем, как начать, настройте встроенный отладчик, как описано в разделе Настройка отладчика JavaScript.

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

    Включение удаленной отладки в Firefox

    1. Откройте браузер Firefox, щелкните на панели инструментов и перейдите к. Откроется панель инструментов разработки.

    2. На панели инструментов панели щелкните, выберите «Параметры» из списка, а затем установите флажки «Включить браузер Chrome и отладку надстроек» и «Включить удаленную отладку» в разделе «Дополнительные параметры».

    Перезапуск Firefox с сервером отладчика

    • В WebStorm откройте окно инструментов терминала Alt + F12 и введите <путь к Firefox> -start-debugger-server <номер порта> в командной строке .Позже вы укажете этот номер порта в конфигурации запуска. Вы можете установить любой номер порта, однако рекомендуется использовать 6000 и более поздних версий.

      Обратите внимание, что в -start-debugger-server есть только одно прочерк.

    • Для версий 61 и более ранних вам не нужно перезапускать Firefox.

      Откройте Firefox, перейдите к и введите listen <номер порта> в консоли, которая открывается в нижней части браузера.

    • В WebStorm откройте окно терминала Alt + F12 и введите <путь к Firefox> --start-debugger-server <номер порта> в командной строке.Позже вы укажете этот номер порта в конфигурации запуска. Вы можете установить любой номер порта, однако рекомендуется использовать 6000 и более поздних версий.

    • Для версий 61 и более ранних вам не нужно перезапускать Firefox.

      Откройте Firefox, перейдите к и введите listen <номер порта> в консоли, которая открывается в нижней части браузера.

    Отладка приложения

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

    2. Создайте конфигурацию отладки типа Firefox Remote: в главном меню выберите, щелкните на панели инструментов и выберите Firefox Remote из списка.

    3. В открывшемся диалоговом окне «Конфигурация запуска / отладки: удаленный доступ к Firefox» введите localhost в поле «Хост». В поле Порт введите порт, который вы указали при включении удаленной отладки в Firefox. Значение по умолчанию — 6000.

    4. Откройте приложение в Firefox.Браузер показывает приложение после выполнения кода, то есть установленные вами точки останова еще не действуют.

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

    6. В открывшемся диалоговом окне нажмите OK, чтобы разрешить входящее соединение из браузера.

    7. Обновите страницу приложения в браузере: на странице отображаются результаты выполнения кода до первой точки останова.

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

    Пример

    есть простое приложение, состоящее из двух файлов: index.html и index.js, где index.html ссылается на index.js. В этом примере показано, как можно отладить приложение, когда оно запущено на встроенном сервере WebStorm.

    1. В окне инструментов терминала ( Alt + F12 , введите start firefox --start-debugger-server 6000 в командной строке.

    2. Установите точки останова в index.js.

    3. Создайте конфигурацию удаленной отладки FireFox, введите localhost и 6000 в поля Хост и Порт соответственно:

    4. Откройте index.html в редакторе, выберите Открыть в браузере из контекстного меню, а затем выберите Firefox из списка: откроется браузер, показывающий приложение, работающее на порту WebStorm (в настоящее время 63345):

    5. В списке на панели инструментов выберите конфигурацию index_firefox_remote и нажмите: Нажмите OK в открывшемся диалоговом окне Incoming Connection: Обновите страницу приложения в браузере.

    Последнее изменение: 25 января 2021 г.

    Отладка JavaScript в Firefox — PhpStorm

    С помощью PhpStorm вы можете отлаживать клиентский JavaScript в Firefox версии 36 и более поздних, используя функцию удаленной отладки Firefox. Однако настоятельно рекомендуется использовать Chrome или любой другой браузер семейства Chrome по следующим причинам:

    • PhpStorm не поддерживает исходные карты во время сеанса отладки в FireFox, что блокирует отладку сжатого или сгенерированного машиной JavaScript.

    • При отладке в Firefox вы не можете предварительно просмотреть изменения кода HTML, CSS или JavaScript на лету — эта функция, известная как Live Edit, поддерживается только в Google Chrome.

    Вы можете отлаживать приложение, работающее на встроенном веб-сервере PhpStorm или на внешнем сервере.

    Перед тем, как начать

    • Убедитесь, что встроенный плагин JavaScript Debugger включен в Настройках / Предпочтения | На странице «Плагины» см. Подробности в разделе Управление плагинами.

    Включение удаленной отладки в Firefox

    1. Откройте браузер Firefox, щелкните на панели инструментов и перейдите к. Откроется панель инструментов разработки.

    2. На панели инструментов панели щелкните, выберите «Параметры» из списка, а затем установите флажки «Включить браузер Chrome и отладку надстроек» и «Включить удаленную отладку» в разделе «Дополнительные параметры».

    Перезапуск Firefox с сервером отладчика

    • В PhpStorm откройте окно инструмента терминала Alt + F12 и введите <путь к Firefox> -start-debugger-server <номер порта> в командной строке .Позже вы укажете этот номер порта в конфигурации запуска. Вы можете установить любой номер порта, однако рекомендуется использовать 6000 и более поздних версий.

      Обратите внимание, что в -start-debugger-server есть только одно прочерк.

    • Для версий 61 и более ранних вам не нужно перезапускать Firefox.

      Откройте Firefox, перейдите к и введите listen <номер порта> в консоли, которая открывается в нижней части браузера.

    • В PhpStorm откройте окно терминала Alt + F12 и введите <путь к Firefox> --start-debugger-server <номер порта> в командной строке.Позже вы укажете этот номер порта в конфигурации запуска. Вы можете установить любой номер порта, однако рекомендуется использовать 6000 и более поздних версий.

    • Для версий 61 и более ранних вам не нужно перезапускать Firefox.

      Откройте Firefox, перейдите к и введите listen <номер порта> в консоли, которая открывается в нижней части браузера.

    Отладка приложения

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

    2. Создайте конфигурацию отладки типа Firefox Remote: в главном меню выберите, щелкните на панели инструментов и выберите Firefox Remote из списка.

    3. В открывшемся диалоговом окне «Конфигурация запуска / отладки: удаленный доступ к Firefox» введите localhost в поле «Хост». В поле Порт введите порт, который вы указали при включении удаленной отладки в Firefox. Значение по умолчанию — 6000.

    4. Откройте приложение в Firefox.Браузер показывает приложение после выполнения кода, то есть установленные вами точки останова еще не действуют.

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

    6. В открывшемся диалоговом окне нажмите OK, чтобы разрешить входящее соединение из браузера.

    7. Обновите страницу приложения в браузере: на странице отображаются результаты выполнения кода до первой точки останова.

    8. В окне инструмента отладки действуйте как обычно: пошагово выполняйте программу, приостанавливайте и возобновляйте выполнение программы, исследуйте ее, когда она приостановлена, просматривайте фактическую модель HTML DOM и т. Д. есть простое приложение, состоящее из двух файлов: index.html и index.js, где index.html ссылается на index.js. В этом примере показано, как можно отладить приложение, когда оно запущено на встроенном сервере PhpStorm.

      1. В окне инструментов терминала ( Alt + F12 , введите start firefox --start-debugger-server 6000 в командной строке.

      2. Установите точки останова в index.js.

      3. Создайте конфигурацию удаленной отладки FireFox, введите localhost и 6000 в поля Хост и Порт соответственно:

      4. Откройте index.html в редакторе, выберите Открыть в браузере из контекстного меню, а затем выберите Firefox из списка: Откроется браузер, показывающий приложение, работающее на порту PhpStorm (в настоящее время 63345):

      5. В списке на панели инструментов выберите конфигурацию index_firefox_remote и нажмите: Нажмите OK в открывшемся диалоговом окне Входящее соединение: Обновите страницу приложения в браузере.

      Последнее изменение: 25 января 2021 г.

      Отладка приложения JavaScript или TypeScript — Visual Studio

      • 13 минут на чтение

      В этой статье

      Вы можете отлаживать код JavaScript и TypeScript с помощью Visual Studio. Вы можете устанавливать и нажимать точки останова, подключать отладчик, проверять переменные, просматривать стек вызовов и использовать другие функции отладки.

      Подсказка

      Если вы еще не установили Visual Studio, перейдите на страницу загрузок Visual Studio, чтобы установить его бесплатно. В зависимости от типа разрабатываемого вами приложения вам может потребоваться установить рабочую нагрузку Node.js для разработки с Visual Studio.

      Отладка серверного скрипта

      1. Открыв проект в Visual Studio, откройте файл JavaScript на стороне сервера (например, server.js ), щелкните желоб слева, чтобы установить точку останова:

        Точки останова — это самая основная и важная функция надежной отладки.Точка останова указывает, где Visual Studio должна приостановить выполнение вашего кода, чтобы вы могли посмотреть на значения переменных или поведение памяти, а также на то, запускается ли ветвь кода.

      2. Чтобы запустить приложение, нажмите F5 ( Отладка > Начать отладку ).

        Отладчик останавливается в установленной вами точке останова (текущий оператор отмечен желтым). Теперь вы можете проверить состояние своего приложения, наведя курсор на переменные, которые в настоящее время находятся в области видимости, используя окна отладчика, такие как окна Locals и Watch .

      3. Нажмите F5 , чтобы продолжить приложение.

      4. Если вы хотите использовать инструменты разработчика Chrome или инструменты F12, нажмите F12 . Вы можете использовать эти инструменты для изучения DOM и взаимодействия с приложением с помощью консоли JavaScript.

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

      Visual Studio обеспечивает поддержку отладки на стороне клиента только для Chrome и Internet Explorer. В некоторых сценариях отладчик автоматически обнаруживает точки останова в коде JavaScript и TypeScript и во встроенных сценариях в файлах HTML.Информацию об отладке клиентского скрипта в приложениях ASP.NET см. В записи блога «Отладка проектов ASP.NET на стороне клиента в Google Chrome».

      Для приложений, отличных от ASP.NET, выполните действия, описанные здесь.

      Подготовьте приложение к отладке

      Если ваш исходный код минимизирован или создан транспилятором, таким как TypeScript или Babel, использование исходных карт необходимо для наилучшего опыта отладки. Без исходных карт вы все равно можете присоединить отладчик к работающему клиентскому скрипту.Однако вы можете иметь возможность устанавливать и нажимать точки останова только в уменьшенном или перенесенном файле, но не в исходном исходном файле. Например, в приложении Vue.js минифицированный скрипт передается в виде строки в инструкцию eval , и нет никакого способа эффективно выполнить этот код с помощью отладчика Visual Studio, если вы не используете исходные карты. В сложных сценариях отладки вы также можете использовать инструменты разработчика Chrome или инструменты F12 для Microsoft Edge.

      Для получения справки по созданию исходных карт см. Создание исходных карт для отладки.

      Подготовьте браузер к отладке

      Для этого сценария используйте Microsoft Edge (Chromium), который в настоящее время называется Microsoft Edge Beta в среде IDE, или Chrome.

      Для этого сценария используйте Chrome.

      1. Закройте все окна целевого браузера.

        Другие экземпляры обозревателя могут препятствовать открытию обозревателя с включенной отладкой. (Расширения браузера могут работать и препятствовать полноценному режиму отладки, поэтому вам может потребоваться открыть диспетчер задач, чтобы найти неожиданные экземпляры Chrome.)

        Для Microsoft Edge (Chromium) также выключите все экземпляры Chrome. Поскольку оба браузера используют кодовую базу хрома, это дает наилучшие результаты.

      2. Запустите браузер с включенной отладкой.

        Начиная с Visual Studio 2019, вы можете установить флаг --remote-debugging-port = 9222 при запуске браузера, выбрав Обзор с … > на панели инструментов Debug , затем выбрав Добавить и затем установите флаг в поле аргументов .Используйте другое понятное имя для браузера, например Edge с отладкой или Chrome с отладкой . Подробности см. В примечаниях к выпуску.

        Либо откройте команду Run с помощью кнопки Windows Start (щелкните правой кнопкой мыши и выберите Run ) и введите следующую команду:

        msedge - порт-удаленной отладки = 9222

        или,

        chrome.exe --remote-debugging-port = 9222

        Откройте команду Run с помощью кнопки Windows Start (щелкните правой кнопкой мыши и выберите Run ) и введите следующую команду:

        хром.exe --remote-debugging-port = 9222

        Это запустит ваш браузер с включенной отладкой.

        Приложение еще не запущено, поэтому вы получаете пустую страницу в браузере.

      Присоедините отладчик к клиентскому скрипту

      Чтобы подключить отладчик из Visual Studio и достичь точек останова в коде на стороне клиента, отладчику требуется помощь в определении правильного процесса. Вот один из способов включить это.

      1. Переключитесь на Visual Studio, а затем установите точку останова в исходном коде, который может быть файлом JavaScript, файлом TypeScript или файлом JSX.(Установите точку останова в строке кода, которая допускает точки останова, например, оператор return или объявление var.)

        Чтобы найти конкретный код в переданном файле, используйте Ctrl + F ( Edit > Find and Replace > Quick Find ).

        Для клиентского кода для достижения точки останова в файле TypeScript, .vue или файле JSX обычно требуется использование исходных карт. Исходная карта должна быть правильно настроена для поддержки отладки в Visual Studio.

      2. Выберите целевой браузер в качестве цели отладки в Visual Studio, затем нажмите Ctrl + F5 ( Отладка > Начать без отладки ), чтобы запустить приложение в браузере.

        Если вы создали конфигурацию браузера с понятным именем, выберите его в качестве цели отладки.

        Приложение откроется в новой вкладке браузера.

      3. Выберите Debug > Attach to Process .

        Подсказка

        Начиная с Visual Studio 2017, после первого подключения к процессу, выполнив следующие действия, вы можете быстро повторно подключиться к тому же процессу, выбрав Отладка > Повторно подключиться к процессу .

      4. В диалоговом окне Присоединиться к процессу получите отфильтрованный список экземпляров браузера, к которым вы можете присоединиться.

        В Visual Studio 2019 выберите правильный отладчик для целевого браузера, JavaScript (Chrome) или JavaScript (Microsoft Edge — Chromium) в поле Присоединить к , введите chrome или edge в фильтре поле для фильтрации результатов поиска.

        В Visual Studio 2017 выберите Webkit code в поле Attach to , введите chrome в поле фильтра, чтобы отфильтровать результаты поиска.

      5. Выберите процесс браузера с правильным портом хоста (в данном примере localhost) и выберите Присоединить .

        Порт (например, 1337) также может отображаться в поле Название , чтобы помочь вам выбрать правильный экземпляр браузера.

        В следующем примере показано, как это выглядит в браузере Microsoft Edge (Chromium).

        Вы знаете, что отладчик подключился правильно, когда DOM Explorer и консоль JavaScript открываются в Visual Studio.Эти инструменты отладки аналогичны инструментам разработчика Chrome и инструментам F12 для Microsoft Edge.

        Подсказка

        Если отладчик не подключается и вы видите сообщение «Не удалось запустить адаптер отладки» или «Невозможно подключиться к процессу. Операция недопустима в текущем состоянии.», Используйте диспетчер задач Windows, чтобы закрыть все экземпляры целевой браузер перед запуском браузера в режиме отладки. Расширения браузера могут работать и препятствовать полноценному режиму отладки.

      6. Поскольку код с точкой останова, возможно, уже был выполнен, обновите страницу браузера.При необходимости примите меры, чтобы запустить выполнение кода с точкой останова.

        Во время паузы в отладчике вы можете проверить состояние своего приложения, наведя курсор на переменные и используя окна отладчика. Вы можете продвинуть отладчик, пошагово пройдя код ( F5 , F10 и F11 ). Дополнительные сведения об основных функциях отладки см. В разделе «Первый взгляд на отладчик».

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

        • Если вам нужно взломать код в исходном файле TypeScript, JSX или .vue и вы не можете это сделать, убедитесь, что ваша среда настроена правильно, как описано в разделе «Устранение неполадок».

        • Если вам нужно взломать код в транспилированном файле JavaScript (например, app-bundle.js ) и вы не можете это сделать, удалите файл исходной карты с именем filename.js.map .

      Устранение неполадок с точками останова и исходными картами

      Если вам нужно взломать код в исходном файле TypeScript или JSX, но вы не можете этого сделать, используйте Attach to Process , как описано в предыдущих шагах, чтобы присоединить отладчик. Убедитесь, что ваша среда настроена правильно:

      • Вы закрыли все экземпляры браузера, включая расширения Chrome (с помощью диспетчера задач), чтобы можно было запустить браузер в режиме отладки.

      • Убедитесь, что вы запускаете браузер в режиме отладки.

      • Убедитесь, что ваш файл исходной карты включает правильный относительный путь к исходному файлу и что он не включает неподдерживаемые префиксы, такие как webpack: /// , что не позволяет отладчику Visual Studio найти исходный файл. Например, ссылку типа webpack: ///.app.tsx можно исправить на ./app.tsx . Вы можете сделать это вручную в файле исходной карты (что полезно для тестирования) или с помощью настраиваемой конфигурации сборки.Для получения дополнительной информации см. Создание исходных карт для отладки.

      В качестве альтернативы, если вам нужно взломать код в исходном файле (например, app.tsx ) и вы не можете это сделать, попробуйте использовать отладчик ; в исходном файле или вместо этого установите точки останова в инструментах разработчика Chrome (или в инструментах F12 для Microsoft Edge).

      Сгенерировать исходные карты для отладки

      Visual Studio может использовать и создавать исходные карты в исходных файлах JavaScript.Это часто требуется, если ваш источник минифицирован или создан транспилятором, таким как TypeScript или Babel. Доступные параметры зависят от типа проекта.

      • Проект TypeScript в Visual Studio по умолчанию создает исходные карты для вас. Дополнительные сведения см. В разделе Настройка исходных карт с помощью файла tsconfig.json.

      • В проекте JavaScript вы можете сгенерировать исходные карты с помощью связующего, такого как webpack, и компилятора, такого как компилятор TypeScript (или Babel), который вы можете добавить в свой проект.Для компилятора TypeScript необходимо также добавить файл tsconfig.json и установить параметр компилятора sourceMap . Пример, показывающий, как это сделать с использованием базовой конфигурации веб-пакета, см. В разделе Создание приложения Node.js с помощью React.

      Для настройки дополнительных параметров исходных карт используйте либо tsconfig.json, , либо параметры проекта в проекте TypeScript, но не то и другое вместе.

      Чтобы включить отладку с помощью Visual Studio, необходимо убедиться, что ссылки на исходный файл в сгенерированной исходной карте верны (это может потребовать тестирования).Например, если вы используете webpack, ссылки в файле исходной карты включают префикс webpack: /// , который не позволяет Visual Studio найти исходный файл TypeScript или JSX. В частности, когда вы исправляете это в целях отладки, ссылку на исходный файл (например, app.tsx ) необходимо изменить с чего-то вроде webpack: ///./app.tsx на что-то вроде ./ app.tsx , который включает отладку (путь указывается относительно исходного файла).В следующем примере показано, как настроить исходные карты в webpack, который является одним из наиболее распространенных сборщиков, чтобы они работали с Visual Studio.

      (только Webpack) Если вы устанавливаете точку останова в TypeScript файла JSX (а не в транспилированном файле JavaScript), вам необходимо обновить конфигурацию Webpack. Например, в webpack-config.js вам может потребоваться заменить следующий код:

        вывод: {
          filename: "./app-bundle.js", // Это пример имени файла в вашем проекте
        },
        

      с этим кодом:

        вывод: {
          имя файла: "./app-bundle.js ", // Замените имя файла в вашем проекте
          devtoolModuleFilenameTemplate: '[resource-path]' // Удаляет префикс webpack: ///
        },
        

      Это параметр только для разработки, позволяющий включить отладку клиентского кода в Visual Studio.

      Для сложных сценариев инструменты браузера ( F12 ) иногда лучше всего подходят для отладки, поскольку они не требуют изменения пользовательских префиксов.

      Настройте исходные карты с помощью файла tsconfig.json

      Если вы добавите tsconfig.json в ваш проект, Visual Studio рассматривает корень каталога как проект TypeScript. Чтобы добавить файл, щелкните правой кнопкой мыши свой проект в обозревателе решений и выберите Добавить> Новый элемент> Файл конфигурации TypeScript JSON . В ваш проект будет добавлен файл tsconfig.json , подобный приведенному ниже.

        {
        "compilerOptions": {
          "noImplicitAny": ложь,
          "noEmitOnError": правда,
          "removeComments": ложь,
          "sourceMap": правда,
          "цель": "es5"
        },
        "исключать": [
          "node_modules",
          "wwwroot"
        ]
      }
        
      Параметры компилятора для tsconfig.json
      • inlineSourceMap : создать один файл с исходными картами вместо создания отдельной исходной карты для каждого исходного файла.
      • inlineSources : генерировать источник вместе с исходными картами в одном файле; требует установки inlineSourceMap или sourceMap .
      • mapRoot : указывает расположение, в котором отладчик должен найти файлы исходной карты ( .map ) вместо расположения по умолчанию.Используйте этот флаг, если файлы времени выполнения .map должны находиться в другом месте, чем файлы .js . Указанное местоположение встроено в исходную карту, чтобы направить отладчик к местоположению файлов .map .
      • sourceMap : Создает соответствующий файл .map .
      • sourceRoot : указывает расположение, в котором отладчик должен находить файлы TypeScript, а не исходные расположения. Используйте этот флаг, если источники времени выполнения должны находиться в другом месте, чем во время разработки.Указанное расположение внедряется в исходную карту, чтобы направить отладчик туда, где находятся исходные файлы.

      Дополнительные сведения о параметрах компилятора см. На странице Параметры компилятора в Руководстве по TypeScript.

      Настроить исходные карты с помощью настроек проекта (проект TypeScript)

      Вы также можете настроить параметры исходной карты, используя свойства проекта, щелкнув проект правой кнопкой мыши и выбрав «Проект »> «Свойства»> «Сборка TypeScript»> «Отладка ».

      Эти настройки проекта доступны.

      • Создать исходные карты (эквивалент sourceMap в tsconfig.json ): Создает соответствующий файл .map .
      • Укажите корневой каталог исходных карт (эквивалент mapRoot в tsconfig.json ): указывает местоположение, в котором отладчик должен найти файлы карты вместо созданных местоположений. Используйте этот флаг, если время выполнения .Файлы map должны находиться в другом месте, чем файлы .js. Указанное местоположение внедряется в исходную карту, чтобы направить отладчик туда, где расположены файлы карты.
      • Укажите корневой каталог файлов TypeScript. (эквивалент sourceRoot в tsconfig.json ): указывает расположение, в котором отладчик должен находить файлы TypeScript, а не исходные расположения. Используйте этот флаг, если исходные файлы времени выполнения должны находиться в другом месте, чем во время разработки.Указанное расположение внедряется в исходную карту, чтобы направить отладчик туда, где находятся исходные файлы.

      Отладка JavaScript в динамических файлах с помощью Razor (ASP.NET)

      Начиная с Visual Studio 2019, Visual Studio обеспечивает поддержку отладки только для Chrome и Microsoft Edge (Chromium).

      Visual Studio обеспечивает поддержку отладки только для Chrome и Internet Explorer.

      Однако вы не можете автоматически попадать в точки останова в файлах, созданных с помощью синтаксиса Razor (cshtml, vbhtml).Есть два подхода, которые вы можете использовать для отладки этого типа файла:

      • Установите отладчик ; Оператор , в котором вы хотите прервать работу. : Это заставляет динамический сценарий прекращать выполнение и немедленно запускать отладку во время его создания.

      • Загрузите страницу и откройте динамический документ в Visual Studio : вам нужно будет открыть динамический файл во время отладки, установить точку останова и обновить страницу, чтобы этот метод работал.В зависимости от того, используете ли вы Chrome или Internet Explorer, вы найдете файл, используя одну из следующих стратегий:

        Для Chrome перейдите в раздел «Обозреватель решений »> «Документы сценариев»> «Имя вашей страницы» .

        Примечание

        При использовании Chrome вы можете получить сообщение , что источник недоступен между тегами

        Как разработчики, мы традиционно исключаем ошибки в наших программах (с этого момента мы будем называть их ошибок , если это нормально), используя содержательные операторы log . Для этого в JavaScript есть знаменитый метод console.log () .

        Но, хотя операторы журнала хороши, они менее эффективны, чем инструмент, позволяющий выполнять пошаговую отладку.Итак, в этой статье мы узнаем, как использовать инструменты разработчика Google Chrome (также известные как DevTools ) для легкой отладки любого приложения JavaScript.

        Одна из замечательных особенностей использования DevTools заключается в том, что поставщики браузеров (например, Firefox и Microsoft) предоставляют свои собственные инструменты для отладки приложения JavaScript, и они работают аналогичным образом. Итак, как только мы научились использовать инструмент отладки для одного браузера, его легко использовать и для другого.

        Взгляните на приложение Greet Me .Это приложение JavaScript запрашивает ваше имя и предлагает вам отправить «пожелание», которое будет использовано для доставки вашего собственного персонального приветствия.

        Рисунок 1. Приложение Greet Me показывает ошибку

        Но подождите, здесь проблема. В приветственном сообщении часть желания отображается неправильно. Он вставляет мошенническое слово NaN . К счастью, Chrome DevTools позволит нам определить проблему.

        Если вы хотите попробовать советы, представленные ниже, вы можете найти приложение Greet Me по адресу https: // greet-me-debugging.vercel.app/. Вы также можете клонировать код приложения из GitHub и запускать его локально.

        DevTools предоставляет множество различных инструментов для выполнения задач отладки, включая проверку DOM, профилирование и проверку сетевых вызовов. Но сейчас нас интересует панель Sources , которая помогает нам в отладке JavaScript.

        Вы можете открыть DevTools, нажав клавишу F12 или используя сочетание клавиш: Control + Shift + I (Windows, Linux) или Command + Option + I (Mac).Щелкните вкладку Sources , чтобы перейти к панели Sources .

        Рисунок 2: Открытие панели источников

        Панель источников имеет три основных раздела.

        Рисунок 3: Разделы панели источников
        1. Раздел Навигатора файлов : Здесь перечислены все файлы, которые запрашивает наша страница Greet Me .
        2. Раздел редактора кода : Когда вы выбираете файл на панели навигатора, его содержимое будет перечислено здесь.Мы также можем редактировать код здесь.
        3. Раздел отладчика : Здесь вы найдете множество инструментов для установки точек останова, проверки значений переменных, отслеживания изменений и т.д. отображается справа от панели редактора кода.

          Рисунок 4: Окно DevTool широко открыто

          Чтобы начать отладку, первое, что нужно сделать, это установить точек останова .

          Точки останова - это логическая точка, в которой выполнение кода должно быть приостановлено, чтобы вы могли его отладить.

          DevTools позволяет устанавливать точки останова разными способами. Когда мы начнем отладку нашего приложения, мы узнаем, как их установить…

          • В строке кода.
          • В условных операторах.
          • На узле DOM.
          • В прослушивателях событий.

          Установить точки останова в строке кода

          Для установки точки останова по строке кода:

          • Щелкните вкладку Источники .
          • Просмотрите исходный файл в разделе Навигация по файлам .
          • Перейдите к строке кода в разделе Code Editor справа.
          • Щелкните столбец номера строки, чтобы установить точку останова на строке.
          Рисунок 5: Установка точки останова для строки кода

          Здесь мы установили точку останова на строке номер 6. Здесь выполнение кода будет приостановлено.

          Советы : Используйте это, если вы не знаете точную область кода для исследования.Даже если вы просто начнете с чего-то, основываясь на предположении, в конечном итоге это приведет к ошибке. Вы также можете установить несколько точек останова строк кода и исследовать. Мы увидим это в последней части статьи.

          Установить условную точку останова

          Для установки условной точки останова:

          • Щелкните вкладку Источник .
          • Просмотрите исходный файл в разделе навигации по файлам.
          • Перейдите к строке кода в разделе редактора кода справа.
          • Щелкните правой кнопкой мыши номер строки и выберите опцию Добавить условную точку останова .
          Рисунок 6a: Щелкните правой кнопкой мыши номер строки
          • Под строкой кода появится диалоговое окно. Начните вводить условие. По мере ввода вы увидите опцию автозаполнения, предлагающую выбрать условие.
          Рисунок 6b: Введите условие
          • Нажмите Введите , чтобы активировать точку останова. Вы должны увидеть оранжевый значок, появившийся в верхней части столбца с номером строки.
          Рисунок 6a: Условная точка останова активирована

          Выполнение кода будет приостановлено всякий раз, когда функция print () вызывается с именем Joe .

          Советы : Используйте условную точку останова, если вы знаете конкретную область кода для исследования. Поскольку вам, возможно, известно об области кода, вы можете дополнительно изучить условия, чтобы найти основную причину проблемы.

          Установить точку останова на прослушивателях событий

          Чтобы установить точку останова на прослушивателях событий:

          • Щелкните вкладку Источники .
          • Разверните панель Точки останова прослушивателя событий в разделе отладчика .
          • Выберите список прослушивателей событий из списка категорий, чтобы установить точки останова. В нашем приложении есть событие нажатия кнопки. Мы будем стремиться установить флажок щелкните под опцией мышь .
          Рисунок 7: Установите точку останова на прослушивателе событий щелчка

          Советы : Используйте это, если вы хотите приостановить код прослушивателя событий, который запускается после запуска события.

          Установить точку останова на узле DOM

          DevTools одинаково эффективен, когда дело доходит до проверки и отладки DOM. Вы можете установить точки останова, чтобы приостанавливать выполнение кода, когда что-то добавляется, удаляется или изменяется в DOM.

          Чтобы установить точки останова при изменении DOM:

          • Щелкните вкладку Elements .
          • Перейдите к элементу, для которого вы хотите установить точку останова.
          • Щелкните элемент правой кнопкой мыши, чтобы открыть контекстное меню. Выберите Break на , а затем выберите одно из: Модификации поддерева , Модификации атрибутов или Удаление узла .
          Рисунок 8: Добавление точки останова при изменении DOM

          Как вы видите на приведенном выше рисунке, мы устанавливаем точку останова на изменении DOM выходного DIV с условием модификации Subtree . Мы знаем, что приветственное сообщение будет добавлено в выходной DIV, и поддерево будет изменено, чтобы разбить его.

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

          Теперь мы знаем все важные методы установки точек останова. В сложной ситуации отладки вам, возможно, придется использовать их комбинацию. Давайте посмотрим, как пройти через точки останова, чтобы выяснить проблему.

          Раздел отладчика предоставляет пять элементов управления для пошагового выполнения кода.

          Рисунок 9: Пошаговое управление

          Step (сочетание клавиш - F9)

          Эта опция позволяет вам проходить построчно по мере выполнения кода JavaScript. Если в пути есть вызов функции, пошаговое выполнение также попадает внутрь функции, выполняет ее построчно, а затем выходит из нее.

          Рисунок 9a: Построчное выполнение

          Step Over (сочетание клавиш - F10)

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

          В приведенном ниже примере мы переходим через функцию logger () .

          Рисунок 9b: Переход через функцию

          Шаг с заходом (сочетание клавиш - F11)

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

          В приведенном ниже примере мы переходим к функции logger () .

          Рисунок 9c: Переход к следующему вызову функции

          Выход (сочетание клавиш - Shift + F11)

          При пошаговом выполнении функции вы можете не захотеть продолжать и выходить из нее. Используйте эту опцию, чтобы выйти из функции.

          В приведенном ниже примере мы переходим внутрь функции logger () , а затем сразу же выходим из нее.

          Рисунок 9d: Выйти из текущей функции

          Продолжить / Перейти (сочетание клавиш - F8)

          Иногда вам может понадобиться перейти от одной точки останова к другой, не отлаживая какой-либо промежуточный код. Используйте эту опцию, чтобы перейти к следующей точке останова.

          Рисунок 9e: Возобновление или переход к следующей точке останова

          Когда вы проходите по строкам для отладки, вы можете проверить область и значение переменных и стек вызовов для вызовов функций.

          Область применения

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

          Рисунок 10a: Панель осциллографа

          Стек вызовов

          Панель стека вызовов помогает идентифицировать стек выполнения функции.

          Рисунок 10b: Стек вызовов

          , Значения

          Проверка значений - это основной способ определить ошибку в коде. При переходе вы можете проверить значение, просто наведя курсор мыши на переменную.

          В приведенном ниже примере мы выбираем переменную name , чтобы проверить ее значение на этапе выполнения кода.

          Рисунок 10c: Проверка значения при наведении курсора мыши

          Кроме того, вы можете выбрать часть кода в качестве выражения, чтобы проверить его значение. В приведенном ниже примере мы выбрали выражение document.getElementById ('m_wish') для проверки значения.

          Рисунок 10d: Проверка значения выражения

          Секция Watch позволяет добавлять одно или несколько выражений и отслеживать их значения во время выполнения.Эта функция очень полезна, когда вы хотите выполнить некоторые вычисления вне логики кода.

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

          Вот шаги, необходимые для добавления часов:

          • Щелкните значок + над разделом Watch
          Рисунок 11a: Добавьте выражение для наблюдения
          • Добавьте выражение для наблюдения.В этом примере мы добавили переменную , желающую, чтобы отслеживал ее значение.
          Рисунок 11b: Наблюдение за значением выражения

          Еще один способ наблюдать за выражением - использовать консольный ящик . См. Пример ниже, чтобы узнать, как его активировать.

          Рисунок 11c: Активация выдвижного ящика консоли

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

          Рисунок 12a: Отключить все точки останова

          Обратите внимание, что описанный выше метод не удаляет точки останова.Он просто деактивирует их на необходимое вам время. Чтобы активировать точки останова, нажмите ту же кнопку еще раз.

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

          Рисунок 12b: Удаление одной, нескольких или всех точек останова

          С учетом всего, что мы узнали до сих пор, как вы думаете, какое исправление, чтобы приложение Greet Me работало должным образом? Вы уже догадались?

          В случае, если нет, это просто дополнительные + перед желает переменную при построении сообщения .

            // Это строка, в которой проблема.
          // Определяем лишний "+" перед желанием.
          const message = 'Привет'
                                  + имя
                                  + ', Ваше желание' '
                                  + + желаю
                                  + 'может сбыться!';
            

          Как мы можем найти это в реалистичном сценарии отладки? Посмотрите это короткое демонстрационное видео (без звука),

          Отладка JS: исправление приложения Greet Me

          Отсюда вы также можете поиграть с фиксированной версией.

          Какой ваш любимый редактор кода? Лично мне нравится код Visual Studio из-за его простоты. Мы можем включить аналогичную среду отладки с помощью VS Code всего за несколько простых шагов.

          VS Настройка кода для отладки

          VS Code имеет несколько расширений (например, подключаемых модулей) для включения различных функций и возможностей. Чтобы включить отладку JavaScript, вам необходимо установить расширение под названием Debugger для Chrome . Вы можете установить его одним из следующих способов:

          • Перейдите на домашнюю страницу отладчика для Chrome и нажмите кнопку «Установить».Это запустит VS Code и автоматически запустит установку.
          • Вы можете найти это расширение на панели Extensions VS Code и установить.
          Рисунок 13a: Установка расширения VS Code

          После установки щелкните слева опцию Run и создайте конфигурацию для запуска / отладки приложения JavaScript.

          Рисунок 13b: Включение отладки с конфигурацией

          Будет создан файл с именем launch.json с некоторой информацией о настройках в нем.Это может выглядеть так:

            {
              // Используйте IntelliSense, чтобы узнать о возможных атрибутах.
              // Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
              // Для получения дополнительной информации посетите: 
              "версия": "0.2.0",
              "конфигурации": [
                  {
                      "тип": "хром",
                      "запрос": "запуск",
                      "name": "Отладить приложение Greet Me",
                      "url": "",
                      "webRoot": "$ {workspaceFolder}"
                  }
              ]
          }
            

          Вы можете изменить следующие параметры:

          • имя : все, что подходит для вашего приложения.Изменять необязательно.
          • url : URL-адрес, по которому ваше приложение работает локально.
          • webRoot : по умолчанию значение $ {workspaceFolder}, - текущая папка. Вы можете изменить его на папку точки входа, где находится файл, например index.html.

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

          Рисунок 13c: Начало отладки

          Общие сведения о панелях отладчика

          VS Code предоставляет инструменты, аналогичные DevTools , для отладки JavaScript.Вы найдете много общего с отладчиком Google Chrome JavaScript, который мы видели в этой статье. Вот основные разделы, о которых вам следует знать:

          1. Включить отладку. Нажмите кнопку воспроизведения, чтобы включить параметр отладки.
          2. Элементы управления для пошагового перехода через точки останова, а также для приостановки или остановки отладки. Это почти похоже на то, что мы видели с Chrome DevTools, за исключением того, что некоторые сочетания клавиш могут отличаться.
          3. Установка точек останова в исходном коде. Это похоже.
          4. Панель области видимости для просмотра диапазонов и значений переменных. В обоих случаях они полностью идентичны.
          5. Панель просмотра для создания и отслеживания выражений.
          6. Стек вызовов исполняемой функции.
          7. Список точек останова для включения, отключения и удаления.
          8. Консоль отладки для чтения сообщений журнала консоли.
          Рисунок 13d: Анатомия элементов управления отладкой VS Code

          Быстрая демонстрация

          Вот небольшая демонстрация (1 минута), демонстрирующая использование элементов управления отладкой VS Code.

          Подводя итог,

          • Всегда лучше использовать инструмент для отладки кода JavaScript. Такой инструмент, как Google Chrome DevTools или расширение отладчика VS Code, намного лучше, чем просто полагаться на console.log () .
          • Панель источников DevTools чрезвычайно мощная, с возможностью проверки значений переменных, просмотра выражений, понимания областей видимости, чтения стека вызовов и т. Д.
          • Существует несколько способов установки точек останова, и мы должны использовать их в зависимости от ситуации отладки .
          • Управлять точками останова просто с DevTools.
          • Расширение отладчика VS Code является столь же мощным и обязательным для использования.
          • Даже при использовании инструмента отладки для локальной разработки помните, что хорошо добавлять значимые команды console.log () , потому что с помощью Bugfender вы сможете собирать информацию о проблемах, которые возникают, когда приложение уже находится в производстве. .

          На этом пока все. Большое спасибо за чтение, надеюсь, вы найдете эту статью полезной.Удачной отладки! Не стесняйтесь связываться с автором в Twitter (@tapasadhikary).

          JS Debugging: Настройка VS Code для отладки

          5 советов и приемов для Firefox DevTools - отладчик JavaScript

          Это третья публикация из серии советов и приемов повышения продуктивности, которые помогут вам отлаживать веб-приложения с помощью Firefox Devtools. Он показывает вам 5 советов и приемов по работе с отладчиком JavaScript в инструментах разработчика Firefox.

          Установить условные точки останова

          Вы можете установить условные точки останова в отладчике JavaScript Инструментов разработчика Firefox, щелкнув правой кнопкой мыши номер строки.Точка останова станет активной и приостановит выполнение, только если условие выполнено. Это действительно удобно для отладки периодически возникающих ошибок и приостановки выполнения для определенных значений и диапазонов.

          Поиск по названию функции или номеру строки

          Вы можете найти имя файла с помощью отладчика JavaScript, нажав CMD + P на Mac ( CTRL + P в Windows и Linux). Если вы хотите найти функцию внутри этого файла или напрямую перейти к номеру строки, есть и другие ярлыки, но я всегда их забываю.Вместо этого вы можете ввести @ в том же поле поиска и найти определение функции. Если вы начнете поиск с : , он перейдет к определенной строке.

          Минифицированный код Pretty Print

          Вы можете распечатать минимизированный код в отладчике JavaScript, нажав значок {} . Я использую его в основном, когда пытаюсь выполнить небольшую отладку на производственных или чужих веб-сайтах, а исходные карты недоступны.

          Установить точки останова URL

          Вы можете установить точки останова URL в отладчике JavaScript Инструментов разработчика Firefox. Точка останова станет активной и приостановит выполнение, когда страница попытается получить доступ к URL-адресу, соответствующему заданному вами правилу. Это действительно удобно для оценки состояния вашего приложения при возникновении сетевых запросов, а также для определения точной строки кода, которая инициировала сетевой запрос.

          Отключить точки останова

          Вы можете отключить и снова включить точки останова в отладчике JavaScript Инструментов разработчика Firefox.Они останутся установленными, но станут неактивными и не будут приостанавливать выполнение вашего кода. Это действительно удобно при отладке предложений if / else, потому что вам не нужно помнить, где вы поместили свои точки отладки в последний раз.

          Это еженедельно

          Это еженедельная серия, за эти годы я собрал так много трюков. Если вам понравилось это или вы хотите увидеть больше, я @ lakatos88 в Твиттере, подписывайтесь на меня там, вот где происходит волшебство.

          .

          Добавить комментарий

          Ваш адрес email не будет опубликован. Обязательные поля помечены *