jsアイキャッチ

JavaScriptのデバッグに便利!Coverageの使い方

こんにちは、ミウラアケミ(@akmnred)です。

今月でプログラマーに転職して、ちょうど1年になります。

以前はカタログ制作会社で10年間DTPオペレーターをやっていました。

学生の頃にHTMLとCSSをかじったことがある程度で、完全未経験、29歳という年齢でプログラミングの世界に飛び込むのはかなり勇気のいることでしたが、どうにかこうにかやっていけてるんじゃないかなって思ってます。まだまだわからないことだらけで、しょっちゅう自信喪失してますが。笑

転職後、半年ほど自社で研修兼実務を経験し、今年の2月からは客先での常駐開発を行なっています。WEB系は短納期が多いため、常駐先も数ヶ月でコロコロ変わるんですよね。かくいう私も既に3社目です。

常駐先が変わる度に新たな人間関係を築かなくてはならないので、私のような人見知りにはなかなかキツイ部分もありますが、他社のやり方を色々見ることが出来て、勉強になることばかりです。

常駐先によって勤務時間や休日も変わるので、そこが良くもあり悪くもあるのですが。とにかく今はいろんな会社で、いろんなやり方を見て勉強して、経験を積むことが大事かなと思ってます。

とある方に、「3年(プログラマーとして)頑張れば、ようやく自分一人で一通りはこなせるようになる。最低3年。それでようやく周りにも1人前と認めてもらえるようになるよ。」と言われたので、あと2年は修行期間と思って頑張るしかないですね。

2年とは言いましたが、プログラマーは一生勉強していかないといけないので、楽しみながらスキルアップしていきたいです。

いづれはフリーランスで働けるまでになりたいな。リモートワーク超絶憧れる。。

さて、ここ数ヶ月間は、仕事でJavaScript(jQuery)をメインで使っているのですが、独学で勉強していた頃はデバッグ(プログラムのバグを発見して修正すること)の仕方がよくわからず、エラーが出た時にどこでエラーが出ているのか特定するのに苦労していました。

実際に開発の現場に出るようになり、他の先輩プログラマーの方達から技術を学んでいく中で、JavaScriptのデバッグにすごく便利なツールを知ったので、ここにメモしておきたいと思います。

ChromeデベロッパーツールのCoverage機能を使う

JavaScriptのデバッグには検証ツールが必須ですよね。

私はブラウザはChromeを使っているので、Chromeのデベロッパーツールを利用しているのですが、Coverageという機能があります。

このCoverageですが、エラーの原因を特定する時や、そもそも処理が通っているかどうか確認するのにとても役立ってくれます。どう役立ってくれるのか、簡単な例を挙げていきたいと思います。

Coverageを検証するためのソース

coverageを使ったデバッグ例"

coverageを使ったデバッグ例"

今回は上記のソースを使って検証していきます。

これは<div id=”test”></div>の中にテストという文字を追加し、追加ボタンをクリックすると、テスト2という文字を追加するプログラムです。このプログラムが狙い通りに動いているのかどうかをCoverageで見ていきます。

処理が通っているかどうか確認

まずはChromeで該当のソースを開きます。次に⌘+option+iキーで検証ツールを開きます。(Windowsの場合はF12キーを押下)

検証ツールが表示されたら、下記キャプチャの通り、左下のメニューアイコンをクリックします。

coverageを使ったデバッグ例"

メニューが出てくるので、Coverageを選択。

coverageを使ったデバッグ例"

Coverageタブが開かれたら、reloadボタンをクリックする。(この時、上部タブでSourcesが選択されていることを確認。別のタブが選択されていたら、Sourcesタブを選択する。)

coverageを使ったデバッグ例"

するとJavaScriptの処理を記述している箇所の左側に、緑色または赤色の線が表示されます。これはなにかというと、緑色になっている部分は処理が通っていて、赤色になっている部分は処理が通っていない、ということを表しています。

coverageを使ったデバッグ例"

このプログラムの場合、<div id=”test”></div>の中にテストという文字を追加する処理は通っているけれど、追加ボタンを押した時の処理は通っていません。追加ボタンを押していないので、そりゃそうですよね。

では、追加ボタンをクリックしてみましょう。

coverageを使ったデバッグ例"

画面上はテスト2という文字が追加されました。検証ツールの方も確認してみます。

coverageを使ったデバッグ例"

全部緑色になりましたね!

JavaScriptのデバッグにはCoverageを活用すべし!

このように、どのタイミングでどの処理が走っているか確認するなら、Coverageがかなり便利です。

例えば、Aの処理の時に値が取得されているのかどうか、もし入っていない場合どの時点から入っていないのか等、細かな動きはブレークポイントを設定して見ていかないといけませんが、ブレークポイントをどこに設定していいのかわからない時なんかにも、処理が走っている緑色の箇所からある程度目星も付けれるので、無駄にプログラムを上から下まで舐める必要もなくなりますね。

ただし、Coverageを常時オンにしておくとブラウザの動きが重くなるので、利用しない時は止めておく方がいいかなと思います。

関連記事

  1. jsアイキャッチ_181107

    JavaScript

    【jQuery】フォームの送信先をボタンによって切り替える方法を徹底解説!

    formのaction(送信先)を動的に切り替えたい時ってありますよね…

  2. html_css

    HTML + CSS

    【HTML/CSS】<br>を使わずに簡単に改行する方法

    プログラマーになった今も、前職のDTPオペレーターだった時もそうですが…

  3. フォントのイメージ

    HTML + CSS

    【無料で使える】Google Fontsの使い方を徹底解説【日本語もOK】

    Web制作をしていて、フォントで変化をつけたい時ってありませんか?いろ…

  4. 【FTP不要】WordPressのサーバー移行はAll-in-One WP Migrationで決まり【10分で完了】のアイキャッチ

    WordPress

    【FTP不要】WordPressのサーバー移行はAll-in-One WP Migrationで決ま…

    「All-in-One WP Migration」というプラグインを使…

  5. Laravelのソース

    プログラミング

    環境構築に失敗したら、一度リセットしてしまった方がいい

    プログラミング初心者にあるあるなのが、環境構築で躓いてそこから先に進ま…

  6. 文字数カウント_アイキャッチ

    JavaScript

    【jQuery】テキストエリアに入力した文字数をリアルタイムでカウントする方法を徹底解説【初心者向け…

    今回は、テキストエリアに入力した文字数をリアルタイムで簡単にカウントす…

最近の記事

  1. 和泉リサイクル環境公園の菜の花
  2. 大阪駅
  3. 黒門市場
  4. 成長
  5. 【FTP不要】WordPressのサーバー移行はAll-in-One WP Migrationで決まり【10分で完了】のアイキャッチ

アーカイブ

PAGE TOP