MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!

独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!

公開日:2019年03月07日
最終更新日:2019年05月28日
オンスタ運営
エンジニア
ホーム > 全記事一覧 > 制作 > エンジニア > 独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
このエントリーをはてなブックマークに追加
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!

どうも!GrowGroupの石原です。
Webに携わる人であれば、どのデバイスにもインストールされている Google Chrome。

特にエンジニアでれば、Chromeで開発している方もたくさんいらっしゃるはず!
今日は、そんな Chrome の開発者用のツールである、「Chrome DevTools」 の便利だと思う機能を独断と偏見でご紹介します!!

 1. スニペット機能

Chrome DevTools の [Sources] パネスの中で、JavaScriptを実行したり、スニペットとして保存したりできますよ!

アニメーションとかはここでざくっと書いてから本格的に書き出したほうが効率あがります!
他にも、このページの記事データを加工してコピペしたいなぁ〜とか、Formのネーム値を加工して一覧で出力したいなぁとか言う時にかなり使えるにくいやつです!

 

参考:

https://developers.google.com/web/tools/chrome-devtools/snippets?hl=ja

2.  レンダリングパネル

FPSを計測したり、レイヤーの線を可視化したり、スクロールやホイールのイベントハンドラーを可視化したり、とにかくアニメーションの最適化を行う時に必須なパネルですよ!

地味に CSS mediaも切り替えることが出来ます!
印刷とかデバッグするのにも使えますよ!!!!!!!!!

 

3.  Search パネル

Webサイト上で読み込んでいるすべてのリソースから文字列検索ができちゃうますよ!!
正規表現もつかえる!ソースコードを表示して検索なんてしなくても大丈夫です!

file:*.html  検索キーワード

上のような感じで file: っていうワードで拡張子を指定できたりもできちゃうすごいやつです!!!

 

4. パフォーマンスモニター

地味にわかりにくいところにありますよ!!

リアルタイムでCPUとかDOMのノード数とかパフォーマンス関連の情報をだしてくれるから、
ちょっとだけとか作りながらパフォーマンスを確認したい時はオススメです!!!

 

 

5. センサーパネル

位置情報とか使う場合、デバッグどうしようってなるかもだけど、そんなことは問題なし!

位置情報もセンサーパネルを利用すれば簡単に上書き可能です!!!!

6. 何でもショートカット

Command + Shift + P で コマンドパレットが開きます!!!!

ほとんどのことがここからできます!!!!!!!!!!!

7.  特定のDOM Nodeのキャプチャ

特定のDOMを選択した状態で、6番のコマンドパレットをひらいて、「Capture」と打ち込むと、

「Capture node screenshot」というメニューがでてきます!!!!

これで選択しているDOMだけのスクリーンショットがとれるんです!!!!!!!!!!!

 

8. レイヤーパネル

レイヤーの全体像が把握できます!!!!!!!

ウィンドウに表示されている以外のレイヤーがどんな動きをしているのか簡単に確認できるんです!!!!!!!1!

 

まとめ

Chrome DevToolsの便利機能を紹介してきましたが、皆さん知っていましたか?!

これからもきっといろんな機能が追加されるので、今後も Chrome Devtoolsを watch し続けます!

以上、石原でした!

 

関連コンテンツ

【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
エンジニア
公開日: 2019年02月09日
最終更新日: 2019年05月28日
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
オンスタ運営
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
エンジニア
制作
公開日: 2019年09月02日
最終更新日: 2019年09月02日
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
エンジニア
公開日: 2017年02月01日
最終更新日: 2019年07月04日
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
オンスタ運営
AMP (Accelerated Mobile Pages) HTML のおさらい
エンジニア
公開日: 2016年11月14日
最終更新日: 2019年05月28日
AMP (Accelerated Mobile Pages) HTML のおさらい
  • # AMP HTML
オンスタ運営
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2019年06月19日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。