More than 1 year has passed since last update.

Cloud9コーディング＋Chromeデベロッパーツールでできること・活用方法を知ろう

Last updated at 2022-10-18Posted at 2022-09-26

デベロッパーツールでどんなことができるか？

他のウェブサイトのコードをチェックができる
デバイス種類を変えて表示チェックができる
HTML要素の構造(親子関係)をチェックできる
HTML要素に適応されているstyleをチェックできる
文章の変更のテストができる
デザイン変更のテストができる
HTMLが正しく認識しているか？チェックできる
styleが正しく認識しているか？チェックできる
外部ファイル（画像やcssファイル・jsファイル）が正しく認識しているか？チェックできる
jQueryが正しく動作しているか？チェックできる

デベロッパーツールの起動方法

`画面のどこかで右クリック → 検証でデベロッパーツール（検証ツール）を開く`

`キーボードショートカット`

-　⌘ + Opt + I （Mac）
-　F12 (Windows)

`Chromeメニューから開く`

統合開発環境Cloud9使用時は、新しいタブでプレビューを開いてから
（コード編集画面では開くとコンソールのエラーが多数になって、正しい判断ができにく・見にくい状態になってしまう）

よくない例
コード編集画面で開くと、正常な表示ができない・Cloud9のツール上のエラーが表示され、分析しにくい・みにくい状態になる

デベロッパーツールの日本語化

青いボタン Swicth DevTools to Japanese をクリック

デベロッパーツールの配置の変更方法

閉じるバツの横の３点メニューをクリックし、サブメニューの固定サイド部で配置の調整ができる
下
左
固定を解除して別ウィンドウで表示

他のウェブサイトのコードをチェックができる

どのページでもコードを見ることができます。
たまに右クリックを禁止しているサイトもありますが、Chromeメニューから開くことは可能です

デバイスの種類を変えて表示チェックができる

実際に http://apple.com/jp/ を開いてデバイスのサイズの変更をしてみましょう
Chromeブラウザのウィンドウ幅を変更することもできますが、モニターの物理的なサイズによって最小幅・最大幅に限界があります。
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）
これがデベロッパーツールを使う主な目的です、モニターの物理的なサイズ問わず、さまざまなウィンドウ幅で確認できるようになります。

横幅・縦幅どちらの数値も下記の操作でコントロール可能
- 入力欄に直接入力＋エンターで確定
- キーボードの上下矢印キーまたは、入力欄のすぐ右の上下の矢印ボタンクリックで 1 ずつ増減微調整
- キーボードのSHIFTキー＋矢印キーで 10 ずつ増減微調整
- キーボードの⌘キー＋矢印キーで 100 ずつ増減微調整（WindowsはCtlキー+矢印キー）
- キーボードのOptキー＋矢印キーで 0.1 ずつ増減微調整（WindowsはAltキー+矢印キー）

プレビューの左右の ||をドラッグすることでも自由な幅に調整可能
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）

よく確認するデバイスサイズは、灰色のバー部分をポイントして、クリックすると一発で切り替え可能
- モバイル(S)-320px・モバイル(M)-375px・モバイル(L)-425px・タブレット-768px・ノートパソコン-1024px・ノートパソコン(L)-1440px・4K-2560px

サイズ：レスポンシブをクリックすると、確認したいモバイル端末に切り替え可能
編集をクリックすると、自由にモバイル端末を追加することが可能

ズーム機能も可能

ブラウザ本体のズーム機能と併用すると挙動がよくわからなくなるケースがあるので、ブラウザの本体側のズームは100%にしておきましょう。

また、切り替えた直後、妙に拡大されている・左右のどちらかが？切れている事象になるケースがあります。メニューからズームを一時的に100%以上に拡大してから、アドレスバーの虫眼鏡アイコンを表示させてからリセットすると解消できることがあります。

挙動がよくわからなくなった場合は、ブラウザ再起動やCloud9のプレビューを閉じて再度、開き直ししましょう

デバイス端末を回転したケースもワンクリックで確認可能（縦横の数値を入れ替えているだけ）
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）

HTML要素の構造(親子関係)をチェックできる＆ HTML要素に適応されているstyleをチェックできる

例えば、Cloud9でこのようなコードを書いた場合、新しいタブで開いたプレビュー側でデベロッパーツールで開くとこのようになります

サンプルコードもここに残しておきます。

index.html

<!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML Sample</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="sample.js"></script>
</head>

<body>

    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    
</body>

</html>

style.css

@charset 'utf-8';

body {
    margin: 0;
}

.container {
    display: flex;
}

.item {
    width: 20%;
    height: 80px;
    padding: 10px;
    border: 5px solid #eee;
    margin: 10px;
    background: #FFE966;
}

要素タブで、▶︎をクリックし、子要素を広げることで親子関係のチェックができる
要素タブで、<タグ>上をhover（クリック）した一瞬、プレビューの要素周辺にて色が表示され、margin・border・padding・widthの具合がチェックができる
flex以外の色の詳細は、計算済みタブで確認可
　　　　-　紫色　　　　　　(flex関連)
　　　　-　濃いオレンジ色（margin）
　　　　-　緑色　　　　　　(padding)
　　　　-　薄いオレンジ色（border）
　　　　-　水色　　　　　　(width)
（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）

ページ内の要素を選択して検査モードをONにして、プレビューの要素上、要素タブの<要素>上をホバーしてみましょう。どの要素か？を教えてくれ、タグ名、ID名・クラス名：レンダリングされた幅・高さのサイズを確認できます。

（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）
ページ内の要素を選択して検査モードで、要素をクリックすることで、styleタブの情報が更新され、クリックされた要素に適応されているstyleが確認できます。
＜ポイント＞ hoverしているだけの状態のままやうまく当該する要素を選択・クリックしないとその要素に適応されているstyleに情報が更新されません

styleタブの赤字のプロパティの上をhoverすると、青いチェックボックスが表示されます、チェックON・OFFすると、そのstyleの機能ON・OFFが確認できます。
チェックOFFにしても無反応のものは、本当に必要なプロパティなのかを検討し、不要な場合は、削除しましょう
（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）