Cum se configurează depanatorul pentru extensia Chrome în Visual Studio Code

de Victor A. Requena

Depanarea aplicațiilor dvs. web cu Visual Studio Code vă face mai eficient. Vă ajută să economisiți mult timp și vă menține codul mai curat. Acest lucru se datorează faptului că nu trebuie să scrieți o grămadă de console.logs și puteți parcurge execuția codului rând cu rând. Dar dacă sunteți aici, probabil că știți avantajele depanării aplicațiilor web. Deci, să începem …

Pregătirea

Primul lucru pe care trebuie să-l faceți este să instalați fișierul Debugger pentru extensia Chrome. După ce l-ați instalat, sunteți aproape gata de plecare. Următorul lucru pe care trebuie să-l faceți este să creați un fișier de lansare pentru Debuggerul de cod Visual Studio. Acest fișier conține diferite configurații ale depanatorului pentru proiectul dvs.

Puteți crea fișierul de lansare accesând secțiunea de depanare din bara de activități și făcând clic pe pictograma roată.

O listă de opțiuni vă va solicita să o selectați pe cea „Chrome”.

După ce ați făcut acest lucru, veți avea un .vscode director cu un launch.json fişier.

Configurări

Există două tipuri de configurații de depanare Chrome: launch și attach. Puteți seta acest lucru în request opțiune din fiecare obiect de configurare.

Lansa

Configurația de lansare lansează o instanță Chrome care rulează un fișier sau o adresă URL specificată. Dacă specificați un URL, trebuie să setați webRoot la directorul din care sunt difuzate fișierele. Aceasta poate fi fie o cale absolută, fie o cale folosind ${workspaceFolder} rezolvator. Acesta este folderul deschis în spațiul de lucru Visual Studio Code.

Notă: Aveți grijă când setați webRoot, aceasta este utilizată pentru a rezolva adresele URL către un fișier de pe computer.

Puteți vedea un exemplu de două launch configurații: o lansare împotriva unui server local și cealaltă lansarea împotriva unui fișier local.

Dacă aveți o instanță Chrome rulată, cea lansată de depanator va utiliza o sesiune temporară. Aceasta înseamnă că nu veți avea extensiile sau filele deschise. Dacă doriți să lansați o instanță Chrome cu utilizatorul și extensiile dvs., trebuie să închideți mai întâi fiecare instanță care rulează.

Notă: Când opriți depanatorul, aceasta va închide fereastra Chrome.

Atașați

Personal prefer să-l folosesc … Această configurație atașează depanatorul la o instanță care rulează din Chrome. Dar pentru ca această opțiune să funcționeze, trebuie să lansați Chrome cu depanarea activată la distanță. Lansarea unei instanțe Chrome cu depanare la distanță variază în funcție de sistemul de operare.

Windows

Există două moduri de a lansa Chrome cu depanare la distanță în Windows. Cea mai simplă este să faceți clic dreapta pe comanda rapidă Google Chrome. Selectați opțiunea de proprietăți și adăugați următoarea comandă în ţintă camp.

--remote-debugging-port=9222

Notă: Aceasta va lansa Chrome cu depanare la distanță activată de fiecare dată când faceți clic pe comanda rapidă.

Cealaltă modalitate este să deschideți promptul de comandă și să executați această comandă înlocuind <chrome_path> cu locația reală a instalării dvs. Chrome.

<chrome_path>chrome.exe --remote-debugging-port=9222

macOS

Deschideți terminalul și executați următoarea comandă:

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

Linux

Lansați terminalul și rulați această comandă:

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

Ce face acest lucru – indiferent de sistemul de operare – este Chrome deschis cu un steag, în acest caz: --remote-debugging-port, și o setează la 9222. Puteți citi mai multe despre acest lucru Aici.

Notă: dacă aveți alte instanțe Chrome care rulează fără depanare la distanță, asigurați-vă că le închideți înainte de a lansa una nouă.

Iată un eșantion attach configurare.

Notă: Dacă nu setați "url" opțiune, va fi solicitată o listă cu filele deschise.

Această extensie are o mulțime de opțiuni foarte utile pe care le puteți utiliza pentru a adapta configurațiile la proiectul dvs. Puteți citi documentația unora dintre ele Aici.

rezumat

Felicitări! Ați învățat cum să instalați și să configurați depanatorul pentru Chrome în Visual Studio Code. De asemenea, ați aflat cum să lansați Google Chrome cu depanarea activată la distanță. Acum este timpul să vă explorați și să vă extindeți noile cunoștințe … Vă recomand cu drag să aruncați o privire asupra extensiei repertoriu.

Sper că v-a plăcut această postare. Mă puteți găsi pe Twitter @_svictoreq. ?