A Chrome-bővítmény hibakeresőjének beállítása a Visual Studio Code-ban

A webalkalmazások hibakeresése a Visual Studio Code segítségével hatékonyabbá teszi Önt. Segít sok időt megtakarítani, és tisztábban tartja a kódot. Ez azért van, mert nem kell egy csomó console.logs- t írni, és soronként végigviheti a kód végrehajtását. De ha itt van, akkor valószínűleg ismeri a webalkalmazások hibakeresésének előnyeit. Tehát kezdjük ...

Beállítás

Első lépésként telepítenie kell a Debugger for Chrome bővítményt. Miután telepítette, majdnem készen áll az indulásra. A következő dolog, amit meg kell tennie: egy indítófájl létrehozása a Visual Studio Code Debugger számára. Ez a fájl tartalmazza a hibakereső különböző konfigurációit a projekthez.

Az indítófájlt úgy hozhatja létre, hogy az Activity Bar hibakeresési szakaszába lép, és rákattint a fogaskerék ikonra.

A lehetőségek listája arra kéri, hogy válassza ki a „Chrome” lehetőséget.

Miután ezt megtette, lesz egy .vscodekönyvtár, amelyben egy launch.jsonfájl található.

Konfigurációk

Kétféle Chrome hibakeresési konfiguráció létezik: launchés attach. Ezt requestminden konfigurációs objektumon belül beállíthatja.

Dob

Az indítási konfiguráció elindít egy Chrome-példányt, amely egy megadott fájlt vagy URL-t futtat. Ha megad egy URL-t, akkor be kell állítania webRootazt a könyvtárat, ahonnan a fájlok kiszolgálásra kerülnek. Ez lehet egy abszolút útvonal vagy egy útvonal a ${workspaceFolder}resolver segítségével. Ez a mappa van megnyitva a Visual Studio Code munkaterületén.

Megjegyzés: Legyen óvatos a beállítás során webRoot, ez a számítógépen lévő fájl URL-jeinek feloldására szolgál.

Két launchkonfigurációról láthat példát : az egyik helyi kiszolgálón, a másik pedig egy helyi fájlon indul.

Ha fut egy Chrome-példány, akkor a hibakereső által elindított ideiglenes munkamenetet fog használni. Ez azt jelenti, hogy nem lesznek bővítményei vagy megnyitott lapjai. Ha egy Chrome-példányt szeretne elindítani a felhasználóval és a kiterjesztésekkel, akkor először minden futó példányt be kell zárnia.

Megjegyzés: Ha leállítja a hibakeresőt, ez bezárja a Chrome ablakot.

Csatolni

Én személy szerint inkább ezt használom ... Ez a konfiguráció a hibakeresőt egy futó Chrome-példányhoz csatolja. De ahhoz, hogy ez az opció működjön, el kell indítania a Chrome-ot, engedélyezve a távoli hibakeresést. A Chrome-példány távoli hibakereséssel történő indítása az operációs rendszertől függően változik.

ablakok

Kétféle módon lehet elindítani a Chrome távoli hibakereséssel a Windows rendszerben. A legegyszerűbb, ha jobb gombbal kattint a Google Chrome parancsikonra. Válassza ki a tulajdonságok opciót, és csatolja a következő parancsot a célmezőbe .

--remote-debugging-port=9222

Megjegyzés: Ez elindítja a Chrome-ot a távoli hibakeresés engedélyezésével, valahányszor a parancsikonra kattint.

A másik módszer a parancssor megnyitása és a parancs végrehajtása 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. ?