æçµæ¥ã24 æ¥ç®ã®èšäºã§ãã
æ¬çªç°å¢ã§ããåºãªãäžå ·åããããformat ãšãã¬ã€ã¯ãã€ã³ãã§ãããã°ããããã¶ãããããããããçŽããšæããã§ã確蚌ãåŸããããŸã§ãããã€ã¯ããããªãâŠâŠãããªãšãã«ã
æ¬çªç°å¢ã® JavaScript ã眮ãæãæžãæããŠãããã°ããããšãã§ããŸããäžèšã§èšããšããŒã«ã«ãããã·ã§ãã
ãªãã§ãã§ããããã«ãªããã©æ¬åœã«æ¬çªãµãŒããŒã«çœ®ããŠãããã¡ã€ã«ããããããã§ã¯ãªãã®ã§å®å¿ã§ãããŸããµãŒããŒåŽã§æ€èšŒãšããçããšå€ãªããŒã¿ã API çµç±ã§å ¥ã£ã¡ãããããããªãã®ã§ããã蟺ã ãæ°ãä»ããŠã
å ã«ãŸãšã
- Source â Overrides ã§ããŒã«ã«ãããã·
- ä»»æã®ãã¡ã€ã«ãšãããã¯ã§ããªãããµãŒããŒã§å ¬éãããæ§æãšå¯Ÿã«ãªã
ln
䜿ãã°ä»»æã®ãã¡ã€ã«ãšãããã§ããããã«ããããããžã§ã¯ãã§ã䜿ãã
詊ã
ã©ãã®ãµã€ãã§ãåŸè¿°ã®æé ã§ãããŸãã
ããŸãã Ginpen.com ã§è©Šããªã global.js
ããããããCSS 㯠styles.css?0000
ã¿ãããªãã€ã§ãã
Overwrite ã䜿ã
- Overrides æå¹å
- Source ããã« â å·ŠåŽãµã€ãã㌠â Overrides
- Select folder for overrides ã§é©åœãªãã©ã«ããŒãéžæ
- DevTools ã«ã¢ã¯ã»ã¹èš±å¯ãäžãã
- ç®çã®ãã¡ã€ã«ãæå
ã«ã³ããŒ
- ç®çã®ãã¡ã€ã«ã Sources ããã«ã§éã (
Ctrl+P
ãå·ŠåŽ Page ã¿ããªã©ãã) - é©åœã«ç·šéïŒç©ºçœã远å ããŠåé€ãšãïŒããŠ
Ctrl+S
ã§ä¿å
- ç®çã®ãã¡ã€ã«ã Sources ããã«ã§éã (
- ç·šéããŠè©Šã
éžæãããã©ã«ãã®äžã«ãã¹ãåã§ãã£ã¬ã¯ããªãŒãäœããããã®äžã§ãã¹ã«åãããŠãã¡ã€ã«ãä¿åãããŸãã
Overrides æ©èœã§ä¿åãããããããŠãããã¡ã€ã«ã«ã¯åæã§çŽ«è²ã®äžžãœã¡ãä»ãã®ã§èŠåããã€ããŸãããŸã Network ããã«ã§èŠå衚瀺ãããã®ã§äœã override ããŠããªãŒãšããã®ãããããŸãã
äžåºŠä¿åããåŸãªãç·šéã¯å¿ ããã DevTools ã§è¡ãå¿ èŠã¯ãããŸãããå€éšã®ãšãã£ã¿ãŒã§ç·šéããŠãå³åæ ãããŸãããã¡ã€ã«åéšåãå³ã¯ãªãã¯ãã “Open in containing folder” ã§ãOS ã®ãã¡ã€ã©ãŒã§éããŸãã
Elements ããã«ã§ CSS ç·šé
ã¡ãªã¿ã« Sources â Filesystem ã¿ãã§ãããããå Žåãšåæ§ãããŒã«ã«ãã¡ã€ã«ãšçŽã¥ããŠããå Žå㯠Elements â Styles ã¿ãã§ç·šéããã¹ã¿ã€ã«ã¯å³æ CSS ãã¡ã€ã«ãžä¿åãããŸãã
Filesystem ã¿ãã«ã€ããŠã¯ãã¡ãã
å·®ãæ¿ãã忢ãäžæåæ¢
Enable Local Overrides ã®ãã§ãã¯ãå€ããããã©ã«ããŒã Remove ããããããšãåã³ãããã¯ãŒã¯ããååŸããããã«ãªããŸããä¿åãããã¡ã€ã«ã¯æ®ããŸãã
該åœãã¡ã€ã«ãåé€ (å³ã¯ãªãã¯ããDelete) ããŠãããã¡ãããããã¯ãŒã¯å©çšã«æ»ããŸãã
ãã«ããããã¡ã€ã«ããããã°
ããŠç§æçãªæ§æãªããããã ãã©ããã«ãããŠã²ãšã€ã«ãªã£ããã¡ã€ã«ã¯ãã®ãŸãŸã²ãšã€ã®å·šå€§ãªãã¡ã€ã«ãšããŠãã£ã¹ã¯ã«ä¿åãããŸããåœããåã ãã©ãã
ãã®ãŸãŸã ãšç·šéãã¥ããã®ã§ãæŽåœ¢ããŠãããŠäººéãèŠãããããã«ããããéçºç°å¢ã®ãã¡ã€ã«ãš ln
ã§ãªã³ã¯ããããšãã 2 éãã®è§£æ±ºæ¹æ³ããããŸãã
æŽåœ¢
巚倧ãªãŸãŸã§ãè¯ããã° Sources ããã«ã§ãœãŒã¹ã³ãŒãã衚瀺ãããäž»ãã€ã³ã®å·ŠäžãæŽåœ¢ãã¿ã³ïŒ”{}” ã¿ãããªãã€ïŒãæŒããšæ¹è¡ãšãè¯ãæãã«ããŠãããŸãã
ãã¡ãã¯ç°¡åã
éçºç°å¢ã®ãã¡ã€ã«ãšããŒããªã³ã¯
ãã£ã¡ã¯ã¡ãã£ãšé¢åã§ãã
Windows ã¯ç¥ããªããã ãã©ãWSL ãå«ã Linux ã macOS ãªãã³ãã³ãã©ã€ã³ãã ln
(link) ã§ãã¡ã€ã«ã®ããŒããªã³ã¯ãäœæã§ããŸããïŒåããã¡ã€ã«å®äœã 2 ãæããæãããïŒããããå©çšã Overrides ã®ãã¡ã€ã«ãéçºç°å¢ã®åºåãã¡ã€ã«ãžãªã³ã¯ãããããšã§ãéçºç°å¢ã®ã³ãŒããæ¬çªç°å¢ã§åããããšãå¯èœã«ãªããŸãã
äŸãã°ãããªæ§æãšããŸãã
- ãµãŒããŒäžã®ãã¡ã€ã« –
http://localhost/static/js/bundle.js
- Overrides ã§ä¿åãããã¡ã€ã« –
~/overrides/localhost/static/js/bundle.js
- éçºç°å¢ã®åºåãã¡ã€ã« –
~/myProject/dist/static/js/bundle.js
ãããã£ãŠ ln
ããŸãã
$ cd ~/overrides/localhost/static/js/ $ rm bundle.js $ ln ~/myProject/output/static/js/bundle.js
ããšã¯åºåãã¡ã€ã«ãããŸãããšããããããã°ããããã¬ãŒãå ã®ãœãŒã¹ã³ãŒãã衚瀺ããŠãããŸããã¹ããïœã
webpack ã§ãã«ããããã¡ã€ã«ããªã³ã¯
åé¡ã¯ãln
ã§ãªã³ã¯ããããã«ã¯ãã¡ã€ã«åºåããŠããããšãå¿
èŠã ãšããããšã§ãããããããããã
ããªãã ã® VS Code ã§ JS ããããã°ããèšäºã§ãæžãããã ãã©ãwebpack-dev-server ã¯ããã©ã«ãã§ã¯ã¡ã¢ãªãŒäžã«ãã¡ã€ã«ãæã€ã®ã§ writeToDisk
ãªãã·ã§ã³ãå¿
èŠã§ããCRA 㯠eject ãšããå¿
èŠã
Next.js 㯠next.config.js
ã®èšå®ã§ãããããã ãã©ããæ¹ãããããŸããã§ãããwebpack-dev-server ãããªã㊠http-proxy-middleware ãšããã®ã䜿ã£ãŠããããã
ãã®ä»
JavaScript ã³ãŒããåçã«æžãæãã
ãã Filesystem ã§ãããããå Žåãåããªãã ãã©ãSources ããã«ã§ãã¡ã€ã«ãç·šéãããšç»é¢ã®åèªã¿èŸŒã¿äžèŠã§å³æåæ ãããŸããã¡ãã£ãšãã€èª¿æŽã¿ãããªãšãã«äŸ¿å©ããã
æ¬çªç°å¢ã®ãµãŒããŒåŽ Node.js ããããã°ãã
ãããã«ãã£ãããšãªããã©ããããšæãã°ãããŸããïŒOverrides ã¯é¢ä¿ãªãã§ããïŒ
node --inspect ./app.js
ssh -L 9229:localhost:9229 [email protected]
詳ããã¯ãã¡ãã
ãããŸã
ãããŸãè¯ããªããšæãã€ã€å¿ èŠã«è¿«ãããŠæ¬çªç°å¢ã®ãããã°ããããªã©ããŠããŸããããããŸã«ããæ¥µãŸãã«ãïŒ
åæã«ä»äººã®ãµã€ãããããã°ããããšãã§ããŸãã
åè
- DevServer | webpack
- webpack-dev-server ã®ãªãã·ã§ã³å šéšè©Šãã
- Webpackâs devServer proxy · Issue #2281 · vercel/next.js –
next.js doesn’t use Webpack dev server
- javascript – Output built dev files on Next.js project – Stack Overflow
- å¥ãµãŒããŒã§åããŠãNode.jsã¢ããªãããŒã転éããŠDevToolsã§ãããã°ããïŒã²ãšã DevTools Advent Calendar 2020 â 02æ¥ç®ïŒ | Ginpen.com
- Elementsããã«ã§ç·šéããCSSããã®ãŸãŸãã¡ã€ã«ã«ä¿åããïŒã²ãšã DevTools Advent Calendar 2020 â 12æ¥ç®ïŒ | Ginpen.com
- VS Codeã®äžã§JavaScript/Node.jsã®ãããã°ãŸã§ããïŒã²ãšã DevTools Advent Calendar 2020 â 21æ¥ç®ïŒ | Ginpen.com