24
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Chromeバージョン59のデベロッパーツールにCSS、JSのカバレッジタブが追加されるらしい

Last updated at Posted at 2017-04-21

※追記 2017/06/06
現在のChrome最新版で利用できます。
わざわざChromiumをダウンロードする必要はありません。


Chromeバージョン59でCSSとJSのカバレッジが確認できるようになるようです。
(2017/04/23現在はChromeはバージョン58です)
https://developers.google.com/web/updates/2017/04/devtools-release-notes

ということで試してみることにしました。

Chromiumのダウンロードと起動

次の記事を参考にさせていただきました。
Chromeのヘッドレスブラウザがやってくる。というわけで試してみた

こちらのページからダウンロード
https://download-chromium.appspot.com/

たぶんzipが落ちてくるので解凍して中の実行ファイルを実行
(windows版ではchrome.exe)

カバレッジを見てみよう

デベロッパーツールを開いて、coverageタブを開きます。
(Qiitaのページで試しています。)

image.png

Coverageを選択。↓Coverageタブ現る!

image.png

start●ボタン押して、リロードして、stop!

image.png

CSSのカバレッジも見れるところが個人的に大感動!
(Qiitaのページでは見ることができなかったので適当なhtml作成して確認)

image.png

jasmine等で作ったtestページで計測すると良さそう。

ただ、複数ページを開いてscript実行をした結果を集計する方法がわからず。。。
無いのか?わからなかっただけか?

リリース予定

http://www.chromium.org/developers/calendar
リリースは2017/06/06の予定みたいです。


本当は話題のヘッドレスモードやってみようと思ってChrome59調べ始めたのですが、
CSSのカバレッジやべぇ!と思ってカバレッジタブで遊んで終わってしまいました。

24
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?