Содержание
I have a really simple project in VSCode, an index.html file linking to a single app.js file.
I want to run and debug this mini website when I hit F5.
How do I configure VSCode to open index.html in the browser and then allow me to set breakpoints in app.js that will be triggered by my interaction with the app in the browser?
In Visual Studio this would "just work", because it fires up its own web server, IIS Express. In VSCode I’m not sure how I set up launch.json and/or tasks.json to create a simple node.js web server and serve index.html.
I have seen some examples of debugging javascript apps, for example this launch.json:
This will run the js file, but I don’t understand how I can interact with the app.
Окно консоли JavaScript можно использовать для взаимодействия и отладки приложений UWP, созданных с помощью JavaScript. You can use the JavaScript Console window to interact with and debug UWP apps built using JavaScript. Эти функции поддерживаются для приложений и приложений UWP, созданных с помощью Инструменты Visual Studio для Apache Cordova. These features are supported for UWP apps and apps created using Visual Studio Tools for Apache Cordova. Справочник по консольным командам см. в разделе JavaScript Console commands. For the console command reference, see JavaScript Console commands.
Окно консоли JavaScript предоставляет вам следующие возможности: The JavaScript Console window allows you to:
Отправка объектов, значений и сообщений из приложения в окно консоли. Send objects, values, and messages from your app to the console window.
Просмотр и изменение значений локальных и глобальных переменных в запущенном приложении. View and modify the values of local and global variables in the running app.
Просмотр визуализаторов объектов. View object visualizers.
Запуск кода JavaScript, который выполняется в текущем контексте скрипта. Run JavaScript code that executes within the current script context.
Просмотр ошибок и исключений JavaScript в дополнение к исключениям модели DOM и среды выполнения Windows. View JavaScript errors and exceptions, in addition to Document Object Model (DOM) and Windows Runtime exceptions.
Выполнение других задач, таких как очистка экрана. Perform other tasks, like clearing the screen. Полный список команд см. в разделе JavaScript Console commands . See JavaScript Console commands for the full list of commands.
Если окно консоли JavaScript закрыто, выберите Отладка> Windows > Консоль JavaScript , чтобы снова открыть его. If the JavaScript Console window is closed, choose Debug> Windows > JavaScript Console to re-open it. Окно отображается только во время сеанса отладки скрипта. The window appears only during a script debugging session.
С помощью окна консоли JavaScript можно взаимодействовать с приложением, не останавливая и не перезапуская отладчик. Using the JavaScript Console window, you can interact with your app without stopping and restarting the debugger. Дополнительные сведения см. в разделе Обновление приложения (JavaScript). For more info, see Refresh an app (JavaScript). Сведения о других функциях отладки JavaScript, таких как использование проводника DOM и установка точек останова, см. в разделе Краткое руководство. Отладка HTML и CSS и Отладка приложений в Visual Studio. For info on other JavaScript debugging features, such as using the DOM Explorer and setting breakpoints, see Quickstart: Debug HTML and CSS and Debug apps in Visual Studio.
Отладка с использованием окна консоли JavaScript Debug by using the JavaScript Console window
Далее приведена процедура создания приложения FlipView и инструкции по интерактивной отладке ошибки кодирования JavaScript. The following steps create a FlipView app and show how to interactively debug a JavaScript coding error.
Пример приложения — это приложение UWP. The sample app here is a UWP app. Однако описываемые здесь функции консоли также применимы к приложениям, созданным с помощью инструментов Visual Studio для Apache Cordova. However, the console features described here also apply to apps created using Visual Studio Tools for Apache Cordova.
Отладка кода JavaScript в приложении FlipView To debug JavaScript code in the FlipView app
Создайте новое решение в Visual Studio, выбрав Файл > Новый проект. Create a new solution in Visual Studio by choosing File > New Project.
Выберите JavaScript > Windows Universal, а затем выберите приложение WinJS. Choose JavaScript > Windows Universal, and then choose WinJS App.
Введите имя проекта, например FlipViewApp , и нажмите кнопку ОК , чтобы создать приложение. Type a name for the project, such as FlipViewApp , and choose OK to create the app.
В элементе BODY элемента index. html замените существующий код HTML следующим кодом: In the BODY element of index.html, replace the existing HTML code with this code:
Откройте файл default.css и добавьте следующий код CSS для селектора #fView : Open default.css and add the CSS for the #fView selector:
Откройте файл default.js и замените код следующим кодом JavaScript: Open default.js and replace the code with the following JavaScript code:
Если цель отладки еще не выбрана, выберите пункт локальный компьютер в раскрывающемся списке рядом с кнопкой устройство на панели инструментов Отладка : If a debugging target isn’t already selected, choose Local Machine from the drop-down list next to the Device button on the Debug toolbar:
Нажмите клавишу F5, чтобы запустить отладчик. Press F5 to start the debugger.
Приложение выполняется, но изображения отсутствуют. The app runs but images are missing. Ошибки APPHOST в окне консоли JavaScript указывают на отсутствие изображений. APPHOST errors in the JavaScript Console window indicate that images are missing.
После запуска приложения FlipView введите Data.items в командной строке окна консоли (рядом с символом "> >") и нажмите клавишу ВВОД. With the FlipView app running, type Data.items in the console window input prompt (next to the ">>" symbol) and press Enter.
В окне консоли отображается визуализатор для объекта items . A visualizer for the items object appears in the console window. Это означает, что объект items создан и доступен в текущем контексте скрипта. This indicates that the items object instantiated and is available in the current script context. В окне консоли можно щелкнуть узлы объекта, чтобы просмотреть значения свойств (или использовать клавиши со стрелками). In the console window, you can click through the nodes of an object to view property values (or use the arrow keys). Если щелкнуть объект items._data , как показано на рисунке, можно увидеть, что ссылки на источник изображений являются неправильными, как и ожидалось. If you click down into the items._data object, as you see in this illustration, you’ll find that its image source references are incorrect, as expected. Изображения по умолчанию (logo.png) все еще присутствуют в объекте, а отсутствующие изображения перемешаны с нужными. The default images (logo.png) are still present in the object, and there are missing images interspersed with the expected images.
Также обратите внимание на то, что в объекте items._data существует намного больше элементов, чем ожидалось. Also note that there are many more items in items._data object than you would expect.
В командной строке введите Data.items.push и нажмите клавишу ВВОД. At the prompt, type Data.items.push and press Enter. В окне консоли отображается визуализатор для функции push , которая реализована в файле проекта Библиотека Windows для JavaScript (WinJS) Windows Library for JavaScript (WinJS) . The console window shows a visualizer for the push function, which is implemented in a Библиотека Windows для JavaScript (WinJS) Windows Library for JavaScript (WinJS) project file. В этом приложении мы используем push для добавления надлежащих элементов. In this app, we are using push to add the correct items. Выполнив небольшой анализ с помощью IntelliSense, можно установить, что следует использовать setAt для замены изображений по умолчанию. With a little investigation using IntelliSense, we find out that we should be using setAt to replace the default images.
Чтобы устранить эту проблему в интерактивном режиме без остановки сеанса отладки, откройте файл default.js и выберите этот код функции updateImages : To fix this problem interactively without stopping the debugging session, open default.js and select this code from the updateImages function:
Скопируйте и вставьте этот код в строку ввода консоли JavaScript. Copy and paste this code into the JavaScript Console input prompt.
При вставке нескольких строк кода в строку ввода консоли JavaScript строка ввода консоли автоматически переключается в многострочный режим. When you paste multiple lines of code into the JavaScript Console input prompt, the console input prompt automatically switches to multiline mode. Можно нажать сочетание клавиш Ctrl + Alt + M для включения и отключения многострочного режима. You can press Ctrl+Alt+M to turn multiline mode on and off. Чтобы выполнить скрипт в многострочном режиме, нажмите клавиши Ctrl + Ввод или выберите символ стрелки в правом нижнем углу окна. To run a script in multiline mode, press Ctrl+Enter or choose the arrow symbol in the lower-right corner of the window. Дополнительные сведения см. в разделе Однострочный и многострочный режим в окне консоли JavaScript. For more info, see Single-line mode and multiline mode in the JavaScript Console window.
Исправьте вызовы функции push в командной строке, заменив pages.push на Data.items.setAt . Correct the push function calls in the prompt, replacing pages.push with Data.items.setAt . Исправленный код должен выглядеть следующим образом. The corrected code should look like this:
Если необходимо использовать объект pages вместо Data.items , следует задать точку останова в коде для сохранения объекта pages в области. If you want to use the pages object instead of Data.items , you would need to set a breakpoint in your code to keep the pages object in scope.
Выберите символ зеленой стрелки, чтобы выполнить скрипт. Choose the green arrow symbol to run the script.
Нажмите клавиши CTRL+ALT+M, чтобы переключить строку ввода консоли в однострочный режим, а затем выберите Очистить входную строку (красный значок "X") чтобы удалить код из строки ввода. Press Ctrl+Alt+M to switch the console input prompt to single-line mode, and then choose Clear input (the red "X") to delete the code from the input prompt.
Введите в командной строке Data.items.length = 3 и нажмите клавишу ВВОД. Type Data.items.length = 3 at the prompt, and then press Enter. Это позволяет удалить лишние элементы данных. This removes the extraneous elements from the data.
Снова проверьте приложение, и вы увидите, что правильные изображения находятся на правильных FlipView страницах. Check the app again, and you’ll see that the correct images are on the correct FlipView pages.
В обозревателе DOM отображается обновленный элемент DIV, и можно перейти в поддерево, чтобы найти нужные элементы IMG. In DOM Explorer, you can see the updated DIV element, and you can navigate into the subtree to find the expected IMG elements.
Остановите отладку, выбрав Отладка > Остановить отладку или нажав клавиши SHIFT+F5, а затем исправьте исходный код. Stop debugging by choosing Debug > Stop Debugging or by pressing Shift+F5, and then fix the source code.
Полную страницу default.html с исправленным примером кода см. в разделе Отладка примера кода HTML, CSS и JavaScript. For the complete default.html page containing corrected sample code, see Debug HTML, CSS, and JavaScript sample code.
Интерактивная отладка и режим приостановки выполнения Interactive debugging and break mode
Можно использовать точки останова и пошаговое выполнение кода при использовании таких средств отладки JavaScript, как окно консоли JavaScript. You can use breakpoints and step into code while you’re using JavaScript debugging tools like the JavaScript Console window. Если программа, которая выполняется в отладчике, оказывается в точке останова, отладчик временно приостанавливает выполнение программы. When a program that’s running in the debugger encounters a breakpoint, the debugger temporarily suspends execution of the program. Если выполнение приостановлено, программа переключается из режима выполнения в режим приостановки выполнения. When execution is suspended, your program switches from run mode to break mode. Выполнение можно возобновить в любой момент. You can resume execution at any time.
Если программа находится в режиме приостановки выполнения, можно использовать окно консоли JavaScript для выполнения скриптов и команд, которые являются допустимыми в текущем контексте выполнения скрипта. When a program is in break mode, you can use the JavaScript Console window to run scripts and commands that are valid in the current script execution context. При выполнении этой процедуры вы будете использовать исправленную версию приложения FlipView , созданную ранее, чтобы продемонстрировать использование режима приостановки выполнения. In this procedure, you’ll use the fixed version of the FlipView app that you created earlier to demonstrate the use of break mode.
Настройка точки останова и отладка приложения To set a breakpoint and debug the app
В файле default.html приложения FlipView , созданного ранее, откройте контекстное меню функции updateImages() , а затем выберите Точка останова > Вставить точку останова. In the default.html file of the FlipView app that you previously created, open the shortcut menu for the updateImages() function, and then choose Breakpoint > Insert Breakpoint.
Выберите локальный компьютер в раскрывающемся списке рядом с кнопкой начать отладку на панели инструментов Отладка . Choose Local Machine in the drop-down list next to the Start Debugging button on the Debug toolbar.
Выберите Отладка > Начать отладкуили нажмите клавишу F5. Choose Debug > Start Debugging, or press F5.
Приложение входит в режим приостановки выполнения, когда выполнение достигает функции updateImages() и текущая строка выполнения программы выделяется желтым. The app enters break mode when execution reaches the updateImages() function, and the current line of program execution is highlighted in yellow.
Можно изменить значения переменных, чтобы немедленно изменить состояние программы, не завершая текущего сеанса отладки. You can change the values of variables to immediately affect the program state without ending the current debugging session.
Введите в командной строке updateImages и нажмите клавишу ВВОД. Type updateImages at the prompt and press Enter. В окне консоли отображается визуализатор для данной функции. A visualizer for the function appears in the console window.
Выберите функцию в окне консоли, чтобы отобразить ее реализацию. Select the function in the console window to show the function implementation.
На следующем рисунке показано окно консоли на этом этапе. The following illustration shows the console window at this point.
Скопируйте одну строку функции из окна вывода в строку ввода и измените значение индекса на 3: Copy one line of the function from the output window to the input prompt, and change the index value to 3:
Нажмите клавишу ВВОД, чтобы выполнить эту строку кода. Press Enter to run the line of code.
Если требуется пошаговое выполнение кода по одной строке, нажмите клавишу F11 или нажмите клавишу F5, чтобы продолжить выполнение программы. If you want to step through the code line by line, press F11, or press F5 to continue program execution.
Нажмите клавишу F5, чтобы продолжить выполнение программы. Press F5 to continue program execution. Появляется приложение FlipView , и теперь на всех четырех страницах отображается одно из изображений, не заданных по умолчанию. The FlipView app appears, and now all four pages show one of the non-default images.
Чтобы вернуться в Visual Studio, нажмите клавишу F12 или сочетание клавиш Alt + Tab. To switch back to Visual Studio, press F12 or Alt+Tab.
Однострочный и многострочный режим в окне консоли JavaScript Single-line mode and multiline mode in the JavaScript Console window
Строка ввода в окне консоли JavaScript поддерживает однострочный и многострочный режим. The input prompt for the JavaScript Console window supports both single-line mode and multiline mode. Процедура интерактивной отладки в этом разделе включает примеры использования обоих режимов. The interactive debugging procedure in this topic provides an example of using both modes. Можно нажать сочетание клавиш Ctrl + Alt + M для переключения между режимами. You can press Ctrl+Alt+M to switch between modes.
Однострочный режим позволяет просматривать историю ввода. Single-line mode provides input history. Для перемещения по истории ввода можно использовать клавиши со стрелкой вверх и стрелкой вниз. You can navigate through the input history by using the Up Arrow and Down Arrow keys. В однострочном режиме строка ввода очищается при выполнении скриптов. Single-line mode clears the input prompt when you run scripts. Чтобы выполнить скрипт в однострочном режиме, нажмите клавишу ВВОД. To run a script in single-line mode, press Enter.
В многострочном режиме строка ввода при выполнении скриптов не очищается. Multiline mode does not clear the input prompt when you run scripts. При переключении из многострочного режима в однострочный можно очистить строку ввода, нажав клавишу Очистить входную строку (красный значок "X"). When you switch to single-line mode from multiline mode, you can clear the input line by pressing Clear input (the red "X"). Чтобы выполнить скрипт в многострочном режиме, нажмите клавиши Ctrl + Ввод или выберите символ стрелки в правом нижнем углу окна. To run a script in multiline mode, press Ctrl+Enter or choose the arrow symbol in the lower-right corner of the window.
Переключение контекста выполнения скрипта Switching the script execution context
Окно консоли JavaScript позволяет одновременно взаимодействовать с одним контекстом выполнения, который представляет один экземпляр узла веб-платформы (WWAHost.exe). The JavaScript Console window allows you to interact with a single execution context, which represents a single instance of the web platform host (WWAHost.exe), at a time. В некоторых сценариях приложение может запускать другой экземпляр узла, например при использовании iframe , контракта совместного доступа, рабочего веб-процесса или элемента управления WebView . In some scenarios, your app may start another instance of the host, such as when you use an iframe , a share contract, a web worker, or a WebView control. Если выполняется другой экземпляр узла, можно выбрать другой контекст выполнения во время запуска приложения, выбрав контекст выполнения в списке Целевой объект . If another instance of the host is running, you can select a different execution context while running the app by selecting the execution context in the Target list.
На следующем рисунке показан список "Цель" в окне консоли JavaScript. The following illustration shows the Target list in the JavaScript Console window.
Вы также можете переключить контекст выполнения с помощью команды cd , однако вы должны знать имя другого контекста выполнения, а используемая вами ссылка должна находиться в области. You can also switch the execution context by using the cd command, but you must know the name of the other execution context and the reference you use must be in scope. Список Целевой объект предоставляет более удобный доступ к другим контекстам выполнения. The Target list provides better access to other execution contexts.
Создание удобного рабочего окружения.
Содержание
Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.
- отладчик кода
- встроенный терминал
- удобные инструменты для работы с Git
- подсветка синтаксиса для множества популярных языков и файловых форматов
- удобная навигация
- встроенный предпросмотр Markdown
- умное автодополнение
- встроенный пакетный менеджер
Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.
Для установки нового пакета зайдите во вкладку “Extensions” которая находится в выпадающем меню “View”, и введите название пакета в строке поиска, нажмите кнопку “Install”.
Babel и ES6
VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.
Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:
Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.
Стандарты кодирования
Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.
Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.
- Установите Node.js используя пакетный менеджер вашей операционной системы.
- Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
- Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.
eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:
Автоматическое дополнение
VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.
IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .
jsconfig.json
Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json , то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:
Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.
Отладка
VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.
Для отладки бэкенд-кода достаточно встроенных возможностей. Для отладки фронтенд-кода нужно установить плагин для соответствующего браузера:
Подробнее об отладке можно узнать на сайте VS Code.
Ссылки
Бесплатный курс по настройке окружения для работы в современной экосистеме JavaScript.