Javascript debugging with Google Chrome

Javascript otklanjanje grešaka sa PhpStorm-om i Google Chrome-om korišćenjem vašeg sopstvenog Chrome profila

Ovo je vodič za pokretanje Javascript otklanjanja grešaka u PhpStormu sa Chromeom dok koristite svoj vlastiti Chrome korisnički profil. Ovdje je cilj da PhpStorm otvori Chrome prozor u svrhu otklanjanja grešaka koristeći vaš vlastiti korisnički profil, umjesto proizvoljnog koji nema nijednu od vaših otvorenih kartica, kolačića itd.

Išao sam okolo i okolo u krug pokušavajući da ovo uspem i konačno sam to shvatio, pa sam odlučio da podelim svoje nalaze.

Konfigurišite PhpStorm pretraživače
Počnimo od početka. Prvo morate saznati gdje je pohranjen vaš Chrome korisnički profil. Da biste to učinili, otvorite Chrome s korisničkim profilom koji želite koristiti, a zatim posjetite chrome://version koristeći taj preglednik. Dobićete stranicu koja izgleda otprilike ovako:



Iz ovoga ćete morati zabilježiti putanju profila.

Zatim idite na PhpStorm i otvorite panel postavki. Idite na Alati > Web pretraživači i pregled i pronađite Chrome na listi. Odaberite ga i pritisnite ikonu olovke za uređivanje.



U dijalog koji se otvori, morate dodati string --profile-dir="Profil 3", gdje Profil 3 odgovara onome što ste vidjeli u chrome://version izlazu.

Također morate provjeriti opciju 'Koristi prilagođeni direktorij korisničkih podataka' i profilirati putanju do direktorija koji sadrži direktorij vašeg korisničkog profila, a ne sam korisnički profil.

U mom slučaju, chrome://version je rekao da je moja putanja profila /Users/kier/Library/Application Support/Google/Chrome/Profile 3, tako da unosim sljedeće:

Opcije komandne linije:
--profile-dir="Profil 3"
Korisničko imenik prilagođenih korisničkih podataka:
/Users/kier/Library/Application Support/Google/Chrome



Vitalni preduslov!
Prije nego što nastavimo, od vitalne je važnosti razumjeti da Chrome mora biti pokrenut u načinu za otklanjanje grešaka da bi mogao komunicirati sa PhpStormom, a kada pokrenete Chrome na normalan način, on to ne čini. Ako ste već sami pokrenuli Chrome koristeći svoj korisnički profil, PhpStorm može otvoriti novu karticu, ali ne može postaviti pretraživač na način za otklanjanje grešaka.

Stoga morate dopustiti PhpStormu da pokrene Chrome umjesto vas ako želite da otklonite greške s njim, ili jednostavno neće raditi.



Zato zatvorite Chrome sada.
Kreirajte konfiguraciju za otklanjanje grešaka
Sada ćemo konfigurisati instancu za otklanjanje grešaka.

U PhpStormu, izaberite Pokreni > Uredi konfiguracije... iz menija.

U dijalogu Run/Debug Configurations, kliknite na [+] i odaberite novu konfiguraciju JavaScript Debug.



Moja konfiguracija za otklanjanje grešaka će ukazivati na korijen moje XenForo 2.3 instalacije, koja se nalazi na /Users/kier/Sites/xf/23 i može se pogledati na https://mcflurry.local/xf/23. Uvjerite se da je vaš prethodno konfigurirani preglednik Chrome postavljen kao preglednik u konfiguraciji, a zatim pritisnite OK da sačuvate konfiguraciju.​

Postavite tačku prekida
Prije nego što nastavimo, postavimo tačku prekida u .js datoteci za otklanjanje grešaka. Otvorio sam core.js i kliknuo u oluku da postavim tačku prekida pored if (XF.activate).



Pokrenite program za otklanjanje grešaka
Sve što sada ostaje je pokrenuti program za otklanjanje grešaka.

U gornjem desnom uglu PhpStorm-a (ili negdje drugdje, ako ste uredili svoj izgled), naći ćete svoje kontrole Run/Debug. Odaberite konfiguraciju koju ste prethodno kreirali i pritisnite dugme za otklanjanje grešaka da biste započeli.

Chrome bi se odmah trebao pokrenuti s vašim korisničkim profilom i otvoriti novu karticu na URL navedenoj u vašoj konfiguraciji.


Ako izvršenje JS-a dostigne vašu tačku prekida, trebali biste vidjeti poruku Pauzirano u debuggeru u pretraživaču, a PhpStorm će prikazati tačku prekida aktivnu i spremnu za korak kroz izvršenje koristeći kontrole koraka na ploči za otklanjanje grešaka.



i to bi bilo znači to sretno sa turtorijalom​