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
    • 関数の処理を終え、呼び出した親の関数に戻る

これで動作確認が捗る

Share

最近の投稿

NetlifyのSplit TestingとFunctionsについて使い方をまとめる Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

Scala開発のためにScalaらしさをまとめる 言語設計者の設計思想を元にScalaらしさについてまとめる オブジェクト指向と関数型の融合について

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

カテゴリ一覧

タグ一覧