JavaScriptのステップ実行について

Published: 2016年5月22日 by tomsato

概要

JavaScriptのコードを書く時に
問題が無いかツールによるチェックや動作確認を行うための方法を調べる

JavaScriptのコード規約・シンタックスチェック

GoogleのJavaScriptのコーディングスタイルチェッカーである「Closure Linter」というものを使う

「Google JavaScript Style Guide」という規則に従ってjsが書かれているかを調べる
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
http://cou929.nu/data/google_javascript_style_guide/ (非公式和訳)
インストール方法

$ git clone https://github.com/google/closure-linter.git
$ cd closure-linter/
$ sudo python ./setup.py install

以下2つのスクリプトが使えるようになる

gjslint スタイルの誤りやシンタックスエラーを調べる
fixjsstyle 自動的にエラーを直してくれる

使い方

// 文法チェック
$ gjslint path/to/file.js

// 文法のチェックを行い自動的に直す
$ fixjsstyle path/to/file.js

■ JavaScriptのステップ実行について

Google Chromeのデベロッパーツールを使用する
手順としては以下

  1. 作成したhtmlファイル(ファイル内にJavaScriptを記述)をGoogle Chromeで開く
  2. Google Chromeのデベロッパーツールを開く
  3. 「Sources」タブを開く
  4. 作成したjsファイルのタブを開く
  5. ブレークポイントの設定を行う
    1. どこから始めるか、始めたい行の番号をクリックするとブレークポイントを設定できる
  6. ページをリロードする
  7. ブレークポイントを設定したところで処理が止まるはず
  8. それっぽいボタンを押してステップ実行する

サンプルとして以下を用意

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf8">
    <title>はじめてのHTML</title>
  </head>
  <body style="background-color:azure;">
    Hello World!!
    <script>
        console.log("hello world! 1");
        console.log("hello world! 2");
        console.log("hello world! 3");
    </script>
  </body>
</html>

手順に従ってブレークポイントを設定してみる

stepjs01
10行目にブレークポイントを設定してみた
この状態でリロードすると以下のように処理が10行目で止まっている
stepjs02

この状態でステップ実行を行って動作の流れを確認することができる
ボタンの意味について
stepjs03
左から説明すると

  • Resume script execution
    • 次のブレークポイントまで実行を再開する
  • Step over next function call
    • 1行ずつコードを実行するが、関数処理も1行とみなし呼び出した関数の中には移動しない
  • Step into next function call
    • 1行ずつコードを実行するが、呼び出した関数の中にも移動する
  • Step out of current function
    • 関数の処理を終え、呼び出した親の関数に戻る

これで動作確認が捗る

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

カテゴリ一覧

タグ一覧