Chrome DevToolsを使いこなしてフロントエンド開発を加速させる

BRANK

Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。スクリーンショットをキャプチャする端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。特定のノードのスクリーンショットをキャプチャするElementsパネルからスクリーンショットをキャプチャしたいノードを選択しますノードを右クリックして「Capture node screenshot」をクリックします選択したノードのスクリーンショットがダウンロードフォルダに保存されますローカルで実装中のコンポーネントの見た目など、パッとUIを共有したいときに便利です。Cmd + Shift + 4しなくても綺麗にノードだけをキャプチャすることができますね。フルサイズのスクリーンショットをキャプチャする専用の拡張機能なども作られていますが、開発者ツールだけで実行可能で…