Consoleについては以下のことを行うことが可能です。 ●JavaScriptの実行 javaScriptを記述し、Enterを押すと処理を実行することができます。[Shift]+[Enter]キーで改行することができますので複数行の記述も可能です。 ●コマンドラインAPI Consoleパネルでは…

Sourcesパネルでは下記のことを行うことができます。 ●CSSやJavascriptの編集 SourcesパネルでCSSやJavascriptを編集することができます。ただし、大元のファイルを編集しているわけではなく、あくまでブラウザ上での変更となります。更新すると編集個所は元…

NetWorkパネルではどのファイルがどのタイミングで読み込まれたか確認することができます。Webサイトで読み込みが遅い際にヒントになります。 ●各カラムの説明 NAME：ファイル名。ファイル名をクリックするとソースなど詳細を確認することができ、Previewで…

Stylesタブでは主に下記を確認することができます。 ●スタイルの確認 ・要素をクリックすることで文字・背景色などを確認することが可能です。 ・ブラウザがデフォルトで持っているスタイルを確認することが可能です。ブラウザがデフォルトで持っているスタ…

Elementsパネルでは主に下記のことができます。 ①タグやスタイルの確認 Elementsパネルで要素をクリックどするとどのようなタグで構成されているか、確認することが出来ます。右側のstyleタブを開くとどのようなstyleで構成されているか、確認することができ…

Chrome DevTools は、Google Chrome に組み込まれたウェブ作成およびデバッグツールのセットです。 DevTools を使用してサイトの反復処理、デバッグ、プロファイリングを行います。 ●公式サイト URL：https://developer.chrome.com/home developers.google.c…