22 æ¥ç®ã®èšäºã§ãã
VS Code ã¯ãŠã§ãéçºã«äŸ¿å©ã ãªïœããã£ããã©ãŠã¶ãŒã®ã¿ãã衚瀺ã§ããªãããªïœãããèãã®ããªãã«æå ±ã§ããã§ããŸãã
é¡åã®ãšãã MS Edge ã䜿ããã ãã©ãmacOS ãªã© Edge ãå°å
¥ããŠããªãå Žå㯠Chrome ã§ä»£çšã§ããŸãã
ãã¢ãããžã§ã¯ã
ãããã°ãã¡ããå©çšãã ãããæšæ¥ã® ã«è¿œå ããŸããããµãŒããŒã¯ npm run start ãªãã node server.js ã§èµ·åããŸãã
æ¬èšäºã«æ²¿ã£ãŠèšå®ããããããã㯠.vscode.example/
ã .vscode/
ãžã³ããŒããã°ãããããã°éå§ã§ããŸãã
Microsoft Edge Tools ã§ VS Code å
ã«ãã©ãŠã¶ãŒã®ç»é¢ãéã
ãã¡ãããŠã§ãããŒãžã®ç»é¢ãš Elements ããã«ã VS Code ã®ã²ãšã€ã®ã¿ããšããŠè¡šç€ºã§ããããã«ããæ¡åŒµã§ããVS Code ãšåãã Microsoft 謹補ã§ãã倧äžå€«ã§ããMac ã§ã䜿ããŸãã
ã€ã³ã¹ããŒã«
VS Code ãµã€ãããŒã® Extensions (Ctrl+Shift+X
) ãéã
“Microsoft Edge Tools” (by Microsoft) ãæ€çŽ¢ïŒäžèšã®ãã®ïŒ
ã€ã³ã¹ããŒã«
éã
ãµã€ãããŒã® Microsoft Edge Tools ãéã
“+” ã® Open a new tab ãã¿ã³ãæŒã
Edge ãçšæãããŠããç°å¢ã§ããã°ããã®ãŠã£ã³ããŠãšã¯å¥ã« VS Code ã§ Edge DevTools ãšããã¿ããéããŸãã空ã®ç»é¢ã衚瀺ãããŠããã¯ããã¢ãã¬ã¹ããŒã« URL ãå
¥åã㊠Elements ããã«ã§éãã§ã¿ãŠãã ããã
ãªãéããšæå㯠about:blank
ã衚瀺ããããã§ãããä»»æã® URL ãžå€æŽå¯èœã§ããåŸã§ãããŸãããã
Mac ã§ Edge ãã€ã³ã¹ããŒã«ããŠããªãå Žåã¯åŸè¿°ãããMac ã§ãããã®æ¹æ³ã詊ããŠã¿ãŠãã ããã
詊ã
ãã¢ãããžã§ã¯ããªã npm run start
ã§ãã¢çšã®ãŠã§ããµãŒããŒãèµ·åããŸããhttp://localhost:8080/
ãéããã¿ãã® URL ãžå
¥åãç§»åããŠãã ããã
VS Code å
ã« localhost ã®ããŒãžã衚瀺ããŠããæ§åããã®ãŸãŸ DOM ããªãŒãè§Šã£ãã Styles ãã€ã³ã§ç¢ºèªãããã§ããã
CSS ãã¡ã€ã«ããšãã£ã¿ãŒã§éãããã«ãã
ãã£ãã VS Code ã®äžã§ Elements ããã«ã衚瀺ããŠãã®ã«ãåæç¶æ
ã§ã¯ãœãŒã¹ã³ãŒãã¯èŠããã ãã§ããElements ããã« Styles ãã€ã³ã§ã¹ã¿ã€ã«ã®å®çŸ©ç®æïŒãã¡ã€ã«åãšè¡çªå·ïŒãã¯ãªãã¯ããããVS Code ã§å³éããããã«ã§ããŸãã
ãã¡ã€ã«ãããã®èšå®
èšå® (Ctrl+,
) ãéã
ïŒUser ã§ã¯ãªãïŒWorkspace ã¿ããéžæ
å·ŠåŽ Extensions â Microsoft Edge Tools
Source Map Path Overrides â Edit in settings.json
èšå®è¿œå ïŒã¡ããé·ãã®ã§æ¬¡ç¯ãžåããŸãïŒ
ãããžã§ã¯ãã«ãŒãã« .vscode/settings.json
ãã¡ã€ã«ãçæããã
DevTools åèµ·å
ãšãã£ã¿ãŒéšåã® Edge DevTools ã¿ããéããïŒéããŠããã°ïŒ
ãµã€ãã㌠Microsoft Edge Tools â 察象ã®ããã¥ã¡ã³ã â å³ç«¯ Attach and open Microsoft Edge Tools ãã¿ã³ãæŒã
èšå®ç»é¢ãSource Map Path Overrides ã®èšå®ã¯ GUI ã§ã¯è¡ãããèšå®ãã¡ã€ã«ãéãå¿
èŠãããã
èšå®ã¯ãã¶ã sourceMapPathOverrides
ã§æ€çŽ¢ããŠãåºãŸãã
ããšãèšå®ã¯ User ã§ã¯ãªã Workspace ã§ä¿åããããã«ããŠãã ãã ããããªããšåããã·ã³ã®å
šãããžã§ã¯ãã§æå¹ã«ãªã£ãŠããŸãã
Source Map Path Overrides ã®èšå®
ã㊠Source Map Path Overrides ã®èšå®ãªãã§ãããéãã JSON ãã¡ã€ã«ããããªâ颚ã«ããŠãã ãããïŒæ°èŠäœæãããã®ãšããŸããæ¢åã®ãã®ãããå Žåã¯é©å®å¯Ÿå¿é¡ããŸããïŒsourceMapPathOverrides
ã®äžèº«ã¯åæå€ãšããŠäœè¡ã远å ãããŠããšæããã§ãããããã¯åé€ããŠãæ®ããŠãããŠãæ§ããŸããã
{
"vscode-edge-devtools.sourceMapPathOverrides": {
"http://localhost:8080/*": "${workspaceFolder}/public/*"
}
}
æ£çŽããã®ãããèšå®ã®æèŠãããããã£ãŠãªããã§ããããã¢ãããžã§ã¯ããªãããã§åãã¯ããä»ã§äœ¿ãå Žåã¯ããŒãçªå· 8080
ããã¡ã€ã«ã®çœ®ãå Žæ /public/
ãªããã倿ŽããŠãã ããã
CRA
create-react-app ã§äœæããã¢ããªã®å Žåã®èšå®ãèŒããŠãããŸãã
{
"vscode-edge-devtools.sourceMapPathOverrides": {
"webpack://src/*": "${workspaceFolder}/src/*"
}
}
CRA 㯠webpack ã§åæãšããªãããããã¡ã€ã«ã«ãªããã§ããããããã source maps ã®ä»çµã¿ãçšããŠå
ã®ã³ãŒããä¿åããŠããŸãããã®ä¿åãããå
ã®ã³ãŒã (webpack:âŠ
) ãããã«å®éã®ãã¡ã€ã«ãžå¯Ÿå¿ããã ããã®ãäžèšã§ãã
ãã®ä»ã®ç°å¢
Elements ããã« Styles ãã€ã³ã§è¡šç€ºããããã¡ã€ã«ãžã«ãŒãœã«ãä¹ãããšãã¹ã衚瀺ãããŸãããããä»¶ã®èšå®ã§å©çšããæãã£ãœãã
App.css ã®ãã¹ãšã㊠webpack://src/App.css
ã衚瀺ãããæ§åã
Network ããã«ã衚瀺ãã
ãšããã§ã¿ã㯠Elements ããã«ã ãã§ãããNetwork ããã«ãåºãããšãã§ããŸãã
Network å©çšã®èšå®
Workspace â Extensions â Microsoft Edge Tools
Enable Network ããªã³ã«
DevTools åèµ·å
ä»¶ã®èšå®ã¯ãSettings ã®äžã§ @ext:ms-edgedevtools.vscode-edge-devtools network
ã§æ€çŽ¢ããŠãåºãŠããŸãã
ãã®ä»ã®ããã«
åºããªãã£ãœããå
šéšåºããŠãããŠããã®ã«ãªãã
æåã«éã URL
èšå®ã® Default Url ã£ãŠãã€ã§æåã® URL ãæå®ããŸããhttp://localhost:8080/
ãšãã
ãªããã ããªãšã
The tab is inactive
æ¥ç¶ããŠãããŠã£ã³ããŠã®ã¿ããé衚瀺ã®éã¯å©çšã§ããŸããã
èŠãªããŠããããã£ãŠãšã㯠Headless ã¢ãŒããæ€èšããŠãã ãããå¥é
åç
§ã
CSS ãã¡ã€ã«åãã¯ãªãã¯ããŠãéããªã
ããããééã£ãŠããããŒã typo ãšãã«æ°ãä»ããŠã©ãã«ãé 匵ã£ãŠãã ããã
ç»é¢ãæ¶ãã
DevTools éšåã®å·Šäž Toggle screencast ãæŒããŠãã ãããåºãããæ¶ãããã§ããŸãã
ããŒãžãçã£çœ
ãµãŒããŒèµ·åããŠãªããšãã
ãã®ä»
JS ã®ãããã°ãããã
JavaScript 㯠VS Code æ¬äœã§éããŠãã¬ã€ã¯ãã€ã³ããèšçœ®ãããã¹ãããå®è¡ãããã§ããã®ã§ããã䜿ããŸãããã
ãã¡ããã©ããã
ä»åã®ãã¢ãããžã§ã¯ããšåããã®ã䜿ã£ãŠããã®ã§ãVS Code ãµã€ãããŒã® Run (Ctrl+Shift+D
) ãš .vscode.example/launch.json
ãèŠãŠããããã°ãããããã
éã« DevTools ã§ç·šéããã
ã§ããŸããç°¡åã«èšããš Sources ããã«ã®å·ŠåŽãµã€ãããŒã§ Filesystem ã䜿ããŸãã
ãã¡ããã©ããã
ãã£ããã©ãŠã¶ãŒã®ãŠã£ã³ããŠãããªã
èšå®ã§ Headless ã«ãã§ãã¯ãå
¥ãããšãããã¬ã¹ã¢ãŒãã«ãªã£ãŠã”+” ãã¿ã³æŒããŠããŠã£ã³ããŠãåºãŠããªããªããŸãããŠã£ã³ããŠã¯ãªããŠã VS Code ã®äžã§ç»é¢ã¯èŠããŠãŸãããèšå®ã§ãªã³ãªãããããæ©åæ§ãäœãã®ãçã«ããã
ãšãã£ã¿ãŒã§ã¿ããéããŠãèŠããªããŠã£ã³ããŠã¯çãæ®ã£ãŠããŸãããµã€ãã㌠Microsoft Edge Tools ã®äžèЧã«è¡šç€ºãããã®ã§ãAttach and open Microsoft Edge Tools ãã¿ã³ã§å床ã¿ããéããŸãã
ãšããããã§èŠããªããæ¶ããªããŠã£ã³ããŠã¯ “+” ãæŒããã³ã«å¢ããŸããã©ããã£ãŠæ¶ããã ããVS Code åèµ·åãããæ¶ããŸãããïŒæéå·®ããããŸããïŒ
Edge ãããªã㊠Chrome ããã
ã§ããŸãããã¶ã Chrome DevTools Protocol ã§ãã£ãŠãã®ã§ã
Chrome ãèµ·åãããšãã« --remote-debugging-port=9222
ãä»ããŠèµ·åããŠãã ããããããããšãµã€ãã㌠Microsoft Edge Tools ã®äžèЧã«è¡šç€ºãããŸããAttach and open Microsoft Edge Tools ãã¿ã³ãæŒãã°æ¥ç¶å®äºã§ãã
Mac ã§ãã
ã¿ãŒããã«ããããâã§ãªã¢ãŒããããã°çšããŒããäžããŠèµ·åã§ããŸããå®è¡ããåã« Chrome ã¯ãã£ããçµäºãããŠãã ããã
$ cd /Applications/Google Chrome.app/Contents/MacOS
$ open -a "Google Chrome" --args --remote-debugging-port=9222
ãã£ã±ã DevTools äžžããšäœ¿ããã
ã§ããããŒãä»å玹ä»ããæ¡åŒµã¯æ©èœãçµã£ãŠããã©ãä»ã«å
šéšå
¥ãã® DevTools ã¿ãã衚瀺ããæ¡åŒµããããŸãããã¡ãã
ã§ã詊ãããçã£çœã§åããªãã£ããã ããªãæ®å¿µãããšã¹ã¯ãªãŒã³ãã£ã¹ãïŒç»é¢ïŒã¯ãªãã¿ããã
ããããããã
pathMapping
ãããã£ãœãèšå®ãªãã ãã©é§ç®ã§ãsourceMapPathOverrides
ã«ããŠäžéãåããã
ããšãã® sourceMapPathOverrides
ã远å ãããšãã«åæå€ã§ããã€ãã®ç°å¢ã«å¯Ÿå¿ããèšå®ãããŠãŠãã䟿å©ãšæã£ããã©ããŒãžã§ã³ã®éããäŸãã° /
ã®æ°ãéã£ãŠãŠåããªãã£ãããããããŒãå ±åããã¹ããªã®ãèªåã®ç°å¢ãããããã®ãïŒ
ãããŸã
æ£çŽããŸãã¡çããšããã«æãå±ããªãæ°ãããŠãŸããããšå€éšã¢ãã¿ãŒäœ¿ããç°å¢ãªã®ã§ VS Code ãšãã©ãŠã¶ãŒãšäž¡æ¹åæã«è¡šç€ºã§ãããããããªã«å¿
èŠã«é§ãããŠããªããšããã®ãããããã
åè