Allied ArchitectsAllied ArchitectsEngineer Blog

Chrome 59の新しい開発ツールを使ってみよう!

2017/06/13 Chrome Dev Tools

お久しぶりです。アライドのギです。

Google Chrome 59がリリースされました。ブラウザと一緒に開発ツールのいくつかの新しい機能も追加されるので、今回は開発ツールの新しい機能を紹介させていただきます。

リリースノートはここに書いてあります。

新しい機能一覧

  • CSS and JS code coverage: 使わないCSSやJSなどを検出する
  • Full-page screenshots: ウェブサイト全体の内容をスクリーンショットする
  • Block requests: requestをブロックする
  • Step over async await: 非同期処理があっても、ステップデバッグできる

詳細

CSS and JS code coverage

HTMLに埋め込んでいるCSS、JSコードのカバレッジをチェックしてくれます。検出結果から不要なソースコードや変なロジックのところなどを見つけることができます。

この機能を使うには、まずはDev toolを開いて、More Toolsにある、Coverageタブをクリックします。
coverage_tool

この機能を試すために、簡単なHTMLファイルを作りました。

 

上のページを開いて、Coverageをチェックしてみましょう!

coverage_test1
結果を見ると、使わない部分が赤く表示されているのが分かります。例としては、ボタンのバックグラウンドを赤にセットするCSSだけ使っているので、その辺だけ緑になっています。

次に「Test Button」を押して、もう一度Coverageをチェックしてみます。
coverage_test2

今度はボタンを押したので、Jsのtest_funcところも緑になります。

Full-page screenshots

今まで、ウェブサイト全体の内容をスクリーンショットしたいとき、viewport resizerという拡張機能を使っていましたが、これからはそれがいらなくなると思いますw

この機能を使うためには、まずはDev toolを開いて、そしてToggle Device Toolbar(レスポンシブチェックボタン)をクリックすると、Toolbarところに置いてあります。

screenshot.png

この機能は二つオプションを提供しています

  • Capture screenshot: 画面に表示される部分しかショットしない
  • Capture full size screenshot: サイトの全体内容をショットする

Block requests

指定したファイルのロードを防止し、そのファイルがサイトにどのような影響を及ぼすかを確認できます。

この機能を使うために、「Network」タブをクリックして、防止したいファイルを右クリックすると「Block Request Url」項目が表示されます。

block_request.png

例を見てみましょう!

htmlファイル

 

JSファイル

 

上に書いたHTMLを少し修正して、JavaScriptの部分を別のファイルに分けておきます。

block_request1.png

Jsファイルがブロックされたので、ボタンを押してもアラートが表示されません。

Step over async await

「async await」はES7の新しい機能です。async awaitを使うことで、非同期処理が簡単に実装できます。

以下はasync awaitの簡単な例です。

 

Chrome 59以前は、ステップデバッグする際、非同期処理があったらデバッグが禁止されましたが、今回のバージョンから非同期処理があっても、ステップデバッグを続けることができるようになりました。

ゴ ヴァンギ
  • ゴ ヴァンギ
  • こんにちは!学んだこと、気になることを書こうと思います。

RELATION ENTRY

Glideを使って、 Goプロジェクトのパッケージバージョンを管理しよう!

Glideを使って、 Goプロジェクトの...

2017/08/29 Go

Glideを使って、 Goプロジェクトのパッケージバージョンを管理しよう! こんにちは!エンジニアのギです。 今回はGoプロジェクトのパッケージバージョンの管理に関して、Glideというツールをご紹介いたします。 Goのデフォルトパッケージ管理を使うときの問題 Go言語には標準で go get...

続きを読む

GVMを使ってGoの開発環境を管理しよう!

GVMを使ってGoの開発環境を管理しよう...

2017/06/21 Go

こんにちは!エンジニアのギです。 最近、プロジェクトでGoを使い始めました。 各プロジェクトでGoの環境設定が違うため、プロジェクト毎に 環境を再設定しなければなりません(これは、結構面倒な仕事です) そこで、すぐにプロジェクトを切り替えられるようにする方法を調べてみました。 今回、GVMの使...

続きを読む

ゴ ヴァンギの記事一覧へ

ページTOPへ