sourceMaps konfiguracja Vscode z Live Serverem, Chrome Debugger

Question

Cześć , mam problem z poprawną konfiguracją VSCoda + Chrome Debugger +  LiveServer.

 

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "preLaunchTask": "npmStart",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5050/",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "/*": "${webRoot}\\*"
            },
            "trace":true,
        }
    ]
}

task.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {   "label": "npmStart",
            "type": "npm",
            "script": "build",
            "isBackground": true,
            "problemMatcher": [
                {
                    "owner": "custom",
                    "pattern": {
                        "regexp": "^(.*)$"
                    },
                    "background": {
                        "activeOnStart": true,
                        "beginsPattern": "^(.*)$",
                        "endsPattern": "^Compiled successfully.(.*)$"
                    }
                }
            ],
        }
    ]
}

pliki poprawnie się transpilują, tworzą się pliki main.js, main.map.js, strona poprawnie się uruchamia niestety nie zatrzymuje sie w breakpoincie, w przegladarce poprawnie rozpoznaje sourceMapy, niestety nie w VScode, 

Live server jest extension do Vscoda, działa na localhoscie:5050:/, 

dodatkowo w setting:

"liveServer.settings.root": "build/"

 

cała aplikacja została stworzona przez 

create-react-app my-app --scripts-version=react-scripts-ts

Jeżeli będzie ktoś zainteresowany to wrzuce na gita.

Pozdrawiam

Comments

I odpalasz to z poziomu npm?

---

samo uruchomienie wygląda tak:

-najpierw uruchamia się task: npmStart (jest w prelunchTask),

-wewnątrz uruchamia się npm-build , jeżeli problemMatcher wychwyci :

(task dziala w backgroudzie)

"endsPattern": "^Compiled successfully.(.*)$"

uznaje że może przejść do debugu.

-włącza się okienko Google Chrome z stroną startowa reacta

-debugger nie robi breaka w App.tsx po stronie Visual Coda

-debugger działa po stronie Chroma

 

Co ciekawe gdy zmienie w tasku: npmStart z npm build na npm start to debbugger dziala, w viusal codzie

---

Npm build buduje Ci finalną wersję.

Npm start uruchamia dev-server.

 

Nie pamiętam, gdzie w React-cli jest obsługa komend.

---

hmm własnie chodzi mi o to żeby nie odpalać to z npm servera tylko na moim live serverze, samo dopalenie działa, ale problem z sourceMapami, w jestem ciekaw w jaki sposob debbuger je znajduje.

Pomysł jest taki:

npm build tylko tworzy mi *.js oraz *.map.js, vs code to uruchamia na live serverze

---

A czy stoi jakiś istotny powód by to  stało na twoim live-serverze?

 

Pokombinowałbym z konfiguracją babela do hotline.

---

Uzywanie go jest o tyle proste, że za każdym razem kiedy tworze jakąś prosta aplikacje nie musze tworzyć backendu w hapi, czy expressie. (tutaj co prawda jest react ale to tylko test).

---

Ale w samym react-app też nie musisz tworzyć backendu ;p, właściwie sam sobie 'tworzy'.

---

Eh no wiem własnie, ale chce tego uniknąć z tego względu że znouw coś dzieje się "Behind the scene", chciałbym miec jakąś kontrole tego w jaki sposób te sourceMapy skonfigurowac w środowisku Vscode.

 

Sam react korzysta z webpacka, i tam faktycznie udało mi się to tak zrobic że działa z palca.

Teraz jestm w trakcie tworzenia prostej aplikacji w TypeScripcie zaraz wrzuce przykład na githhub

---

Obawiam się, że będziesz musiał ręcznie skonfigurować Reacta.

Answer 1

Póki co zrobiłem nowy projekt, od podstaw i ten działa, muszę jeszcze coś pokombinować z bashem, Ctrl+Shift+B powinien budować projekt, niestety bash zintegrowany z VScodem żle czyta scieżki pomija zupełnie \, na razie włączam to recznie, co ciekawe też z poziomu basha tsc -w i poprawnie tworzy pliki w build/js.

https://github.com/toch88/TypeScript_vscode_sourceMap_Chrome_debugger_setup

dodałem tez dwie opcje w launch.json

 "breakOnLoad": true,
 "breakOnLoadStrategy":"regex" 

dzieki temu debugger działa na wejściu, oraz pomija plik transpilowany (w przeciwnym wypadku zawsze wchodziłby najpierw do inject.js). 

W ogóle zrezygnowałem z Live Servera na razie okazuje sie ze sam Chrome Debugger już sam uruchamia to localhoscie, na początku byłem przekonany że właśnie musi byc podstawiony jakiś serwer z którego on korzysta. 

Zaraz wracam do poprzedniego projektu zobacze jakt tam bedzie to wygladać.