フロントエンド技術を学ぼう 2-26.Webデベロッパーツールについて学ぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第36回はPart II: Learning Front-End Devから、26項のLearn Web Developer Toolsを紹介します。

Webデベロッパーツールについて学ぶの説明です。

Webデベロッパーツールについて学ぶ

Web開発ツールを使用すると、コードをテストおよびデバッグできます。これはWebサイトの作成ソフトやIDEとは異なり、Webページの作成を直接支援するものではなく、WebサイトやWebアプリケーションのユーザーインターフェイスをテストするためのツールです。

Web開発ツールは、ブラウザのアドオンやWebブラウザの機能として組み込まれています。Google Chrome、Firefox、Opera、Internet Explorer、Safariのような人気のあるWebブラウザには、Web開発者を支援するツールが組み込まれています。そして多くのアドオンが各ブラウザプラグインのダウンロードセンターで見つけることが出来ます。

Web開発ツールを使用すると、開発者はHTML、CSS、DOM、JavaScript、その他のコンポーネントなど、Webブラウザで処理される様々なWebテクノロジを使用できます。 Webデベロッパーからの需要が高まってきている為、人気のあるブラウザでは開発者向けのより多くの機能が含まれてきています。

参照元：英語版Wikipedia

Chromeデベロッパーツール

ほとんどのブラウザにはWeb開発ツールが搭載されていますが、Chrome デベロッパーツールは現在最も話題にされ、広く使用されているツールです。

私はChromeデベロッパーツールを学習して使用することをおすすめします。なぜなら、Webデベロッパーツールを学習するための良いリソースはChrome デベロッパーツールを中心に作成されているからです。

Chromeデベロッパーツールを学ぶ

• Explore and Master Chrome DevTools [視聴]
  (Chromeデベロッパーツールを探求しマスターする)
• Google Chrome版Firebug：デベロッパーツール取扱説明書 [読み物][日本語]
• Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 [読み物][日本語]
• 知らないと損！：Google Web Developer Toolsの使い方 [読み物][日本語]

Chrome Webデベロッパーツールのドキュメント

• Command Line API Reference
  (コマンドラインAPIリファレンス)
• Keyboard & UI Shortcuts Reference
  (キーボードとUIのショートカットリファレンス)
• Per-Panel Documentation
  (パネルごとのドキュメント)
• Configure and Customize DevTools
  (デベロッパーツールの設定とカスタマイズ)

ニュースレター、ニュースサイト、ポッドキャスト

• Dev Tips
  (デベロッパーのヒント)