Chrome開発者ツールã®å°æŠ€é›† | POSTD最近ã€æ™®æ®µä»¥ä¸Šã«Chromeã®é–‹ç™ºè€…ツールを使ã†ã“ã¨ã«æ™‚é–“ã‚’ã‹ã‘る機会ãŒã‚ã‚Šã¾ã—ãŸã€‚ãã®éŽç¨‹ã§ã€è‡ªåˆ†ãŒä»Šã¾ã§æ°—ã¥ã„ã¦ã„ãªã‹ã£ãŸæ©Ÿèƒ½ã‚’ã„ãã¤ã‹è¦‹ã¤ã‘ã¾ã—ãŸï¼ˆå°‘ãªãã¨ã‚‚今ã¾ã§ãã®æ©Ÿèƒ½ã‚’探ã™å¿…è¦ã«è¿«ã‚‰ã‚Œã¦ã„ãªã‹ã£ãŸã€ã¨ã‚‚言ãˆã‚‹ã®ã§ã™ãŒã€‚例ãˆã°ãƒ–ラックボックス化やéžåŒæœŸã®ã‚¹ã‚¿ãƒƒã‚¯ãƒˆãƒ¬ãƒ¼ã‚¹ãªã©ï¼‰ã€‚ãã®ãŸã‚ã€é–‹ç™ºè€…ツールã§ã¨ã¦ã‚‚æ°—ã«å…¥ã£ã¦ã„ã‚‹ã„ãã¤ã‹ã®æ©Ÿèƒ½ã«ã¤ã„ã¦ã¾ã¨ã‚ã¦ã¿ãŸããªã£ãŸã®ã§ã™ã€‚ å°ã•ãªè™«çœ¼é¡ã®ã®ã‚¢ã‚¤ã‚³ãƒ³ã¯ã€ç‰¹å®šã®è¦ç´ ã‚„CSSプãƒãƒ‘ティã«å¯¾ã—ã¦ã€ã€Œã©ã®CSSファイルã«æ›¸ã‹ã‚Œã¦ã„ã‚‹ã©ã®ã‚»ãƒ¬ã‚¯ã‚¿/クラスãŒæœ€çµ‚çš„ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’決ã‚ã¦ã„ã‚‹ã‹ã€ã‚’示ã—ã¦ãã‚Œã¾ã™ã€‚例ãˆã°ã€ã©ã‚Œã‹DOMè¦ç´ ã«å¯¾ã—ã¦ã€Œè¦ç´ を検証ã€ã‚’é¸ã³ã€å³å´ã®ã€ŒComputedã€ã¨ã„ã†ã‚¿ãƒ–ã‚’é¸ã³ã¾ã™ã€‚確èªã—ãŸã„CSSプãƒãƒ‘ティを見ã¤ã‘ã¦ãã®è™«çœ¼é¡ã‚¢ã‚¤ã‚³ãƒ³ã‚’クリックã™ã‚‹ã“ã¨ã§ã€ã™ãã•ã¾å³å´ã«æ£ã—ã„CSSファイル内ã®ã‚¯ãƒ©ã‚¹/セレクタを表示ã—ã¦ã
Dockerã§å³å®Ÿè¡Œã§ãã‚‹ã€ç¤¾å†…・自宅å‘ã‘オープンソースWebアプリ - Qiita
{{#tags}}- {{label}}
{{/tags}}