Як налаштувати налагоджувач для розширення Chrome у Visual Studio Code

Налагодження веб-програм за допомогою Visual Studio Code робить вас більш ефективними. Це допоможе заощадити багато часу та збереже чистість коду. Це тому, що вам не потрібно писати купу console.logs, і ви можете переглядати виконання коду рядок за рядком. Але якщо ви тут, ви, мабуть, знаєте переваги налагодження веб-програм. Отже, почнемо ...

Налаштування

Перше, що вам потрібно зробити, це встановити розширення Debugger for Chrome. Після встановлення ви майже готові до роботи. Наступне, що вам потрібно зробити, це створити файл запуску для налагоджувача коду Visual Studio. Цей файл містить різні конфігурації налагоджувача для вашого проекту.

Ви можете створити файл запуску, перейшовши до розділу налагодження на панелі активності та натиснувши значок шестерні.

Список опцій запропонує вибрати “Chrome”.

Після цього ви отримаєте .vscodeкаталог із launch.jsonфайлом.

Конфігурації

Існує два типи конфігурацій налагодження Chrome: launchі attach. Ви можете встановити цю requestопцію в кожному об'єкті конфігурації.

Запуск

Конфігурація запуску запускає екземпляр Chrome, на якому працює вказаний файл або URL-адреса. Якщо ви вказали URL-адресу, вам потрібно встановити webRootкаталог, з якого подаються файли. Це може бути як абсолютний шлях, так і шлях, що використовує ${workspaceFolder}вирішувач. Це папка, відкрита у робочій області Visual Studio Code.

Примітка. Будьте обережні під час налаштування. webRootЦе використовується для перетворення URL-адрес у файл на вашому комп’ютері.

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

Якщо у вас запущений екземпляр Chrome, той, який запускається налагоджувачем, використовуватиме тимчасовий сеанс. Це означає, що у вас не буде розширень або відкритих вкладок. Якщо ви хочете запустити екземпляр Chrome із вашим користувачем та розширеннями, вам слід спочатку закрити кожен запущений екземпляр.

Примітка. Коли ви зупините налагоджувач, це закриє вікно Chrome.

Прикріпити

Я особисто вважаю за краще використовувати цей ... Ця конфігурація приєднує відладчик до запущеного екземпляра Chrome. Але для того, щоб ця опція працювала, вам потрібно запустити Chrome із увімкненою віддаленою налагодженням. Запуск екземпляра Chrome із віддаленою налагодженням залежить від вашої ОС.

Windows

Є два способи запустити Chrome із віддаленою налагодженням у Windows. Найпростіший - клацнути правою кнопкою миші на ярлику Google Chrome. Виберіть параметр властивостей і додайте наступну команду в цільове поле.

--remote-debugging-port=9222

Примітка. Це запустить Chrome із увімкненою віддаленою налагодженням кожного разу, коли ви натискаєте ярлик.

Інший спосіб - відкрити командний рядок і виконати цю команду, замінивши th> with the actual location of your Chrome installation.

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

macOS

Open the terminal and execute the following command:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

Launch your terminal and run this command:

google-chrome --remote-debugging-port=9222

What this does — no matter what OS — is open Chrome with a flag, in this case: --remote-debugging-port, and sets it to 9222. You can read more about this here.

Note: If you have other Chrome instances running with no remote debugging, make sure to close them before launching a new one.

Here’s a sample attach configuration.

Note: If you do not set the "url" option, a list will be prompted with your open tabs.

This extension have a lot of very useful options that you can use to adapt the configurations to your project. You can read the documentation of some of them here.

Summary

Congratulations! You’ve learned how to install and set up the debugger for Chrome in Visual Studio Code. You also learned how to launch Google Chrome with remote debugging enabled. Now it’s time for you to explore and expand your new knowledge… I highly recommend you to take a look at the extension’s repository.

I hope you enjoyed this post. You can find me on Twitter @_svictoreq. ?

Original text