DNET_DevToolsDebugging

開発者ツールによるデバッグ

• 戻る

概要

Chromeなどにて、F12を押下することによって「開発者ツール」を起動してデバッグできる。

詳細

HTML

• HTML

「開発者ツール」の[Element]タブに遷移すると、HTMLを確認できる。

CSS

• CSS

「開発者ツール」の[Element]タブに遷移すると、CSSも確認できる。

JavaScript

• JavaScript

• 「開発者ツール」の[Sources]タブに遷移すると、JavaScriptをデバッグできる。

• Reactでデバッグを行う方法については、コチラ（の該当節）。

• 参考

  • Chrome DevTools で JavaScript をデバッグする
    Tools for Web Developers | Google Developers
    https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=ja

デバッグ例

デザインが崩れるので比較してみたところ、
タグのmarginに問題があることが確認できた。

デバッグ１

デバッグ２

参考

• JavaScriptのデバッグ

移行メモ

• 元 Wiki では見出しそのものが他ページへのリンクになっていた箇所 （「HTML」「CSS」「JavaScript」）は、GitHub Wiki では見出しから アンカが生成されるため、見出しをプレーン・テキストとし、 リンクは直下の本文に置いた。
• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 他ページのアンカを指すリンクは「（の該当節）」を添える形に置き換えた。
• 末尾の「参考」は元 Wiki では見出しのみで本文が無かったため、 関連する JavaScriptのデバッグ への参照を置いた。

---

Tags: 移行, 開発者ツール, DevTools, デバッグ, HTML, CSS, JavaScript, Chrome, React