1.Google Chromeデベロッパーツールでできること

---

 

Google Chromeデベロッパーツールは、Google Chromeブラウザに直接組み込まれたWeb開発者向けツールです。

マーケティング担当者、SEO担当者、デザイナーも、デベロッパーツールを使用して変更をテストし、Webページを最適化することができます。

 

Google Chromeデベロッパーツールを使用することで、より優れたWebサイト構築に役立ちます。

なお、開発者でなくても、デベロッパーツールを利用可能です。

 

Webページのデザインの編集・変更テスト 

デベロッパーツールでは、ブラウザ上でページのCSSを直接変更することができます。

色の組み合わせやフォントなど、CSSで管理されているものなら何でも試すことができます。

 

スタイルシートを操作する必要はなく、基本的には1文字もコードを書く必要はありません。

スタイルを変更すると、その変更内容がページ内にリアルタイムで表示されます。

 

 

他社のサイトのコード・サイズのチェック

Webサイトを見ているだけでは、どんなCMSを使って構築されているのかわからないことが多いでしょう。

しかし、デベロッパーツールを使えば簡単に知ることができます。

 

 

Webページのエラーチェック

また、デベロッパーツールでWebページのエラーチェックもできます。

インスペクタータブを使うことで、ページのエラーや警告を確認可能です。

 

 

 

2.Google Chromeデベロッパーツールの使い方

---

 

Google Chromeデベロッパーツールの使い方について解説してきました。では、実際の使い方を解説していきます。

 

起動の方法

デベロッパーツールは、キーボードショートカット、あるいはChromeのメニューから起動できます。

ショートカットキーはMac OSの場合「Cmd+Shift+J」または「Cmd+Shift+C」、Linux・Chromebook・Windowsの場合は「Ctrl+Shift+J」となります。

 

Chromeのメニューから起動する場合は、Chromeメニューを開き「その他のツール」から「デベロッパーツール」を選択します。

デベロッパーツールのパネルは、どのウェブページにいても開くことが可能です。

 

新しいChromeウィンドウを開くたびに再度開く必要がありますが、デベロッパーツールを開いたままウェブページ間を移動することができます。

 

 

スマートフォン・タブレットでの表示

パソコンから簡単にデベロッパーツールを起動することができますが、スマートフォン・タブレッドの場合は少し手順が複雑になります。

iPhoneの場合は以下の手順となります。

 

 

Android端末の場合は以下の手順となります。

 

 

 

Elements（エレメンツ）パネルでHTML・CSSを確認する

デベロッパーツールのエレメントタブを使うと、ブラウザを見ているようにWebページを見ることができます。

ブラウザ上だけでHTMLやCSSを一時的に変更可能です。

 

Webページ上で変更したい要素を「Ctrlキーを押しながらクリック」するか「右クリック」します。

例えば、色を変更したい場合はタブの左下のパネルに、その要素の色が表示されます。

 

あとはカラーボックスをクリックし、「Chromeカラーピッカー」で別の色をクリックするだけで色の変更が設定可能です。

 

 

 

3.まとめ

---

今回はGoogle Chromeデベロッパーツールについて、できることから簡単な使い方まで詳しく解説してきました。

デベロッパーツールを使うことで、Webデザインの編集やエラーチェックなどができます。パソコンから簡単に操作可能です。

 

フリーランスエンジニア専門の求人・案件一括検索サイト「フリーランススタート」に少しでも興味がある方は是非ご登録ください。

 

なお、フリーランススタートはiOSアプリ版やAndroid版をリリースしています。

通勤しているエンジニア・デザイナーでちょっとしたスキマ時間で手軽にフリーランス求人・案件を検索したい、開発言語の単価が知りたい、フリーランスを将来的に検討している方などは是非インストールしてみてください。

 

フリーランススタートのアプリを有効活用して、フリーランスとして第一線で活躍しましょう！

 

フリーランススタート iOSアプリのインストールはこちらから→

 

フリーランススタート Androidアプリのインストールはこちらから→

 

本記事が皆様にとって少しでもお役に立てますと幸いです。