12周年記念パーティ開催! 2024/5/10(金) 19:00

JavaScriptのデバッグ

全7回

このシリーズでは、主にChromeのデベロッパーツールを用いた、さまざまなJavaScriptのデバッグ手法を紹介します。実際のツールの使い方から、結果の見方、活用方法まで解説しています。

最終回 DevToolsを使いこなす 2

Webサイトが1種類のデバイスでのみ閲覧されることは少なくなりました。多様なデバイスの特性を踏まえたデバッグが必要になる場面も多々あります。そのデバッグを助けるデバイスモードを解説します。

第6回 DevToolsを使いこなす 1

デバッグツールは日々進化します。この記事ではChromeのDevToolsを中心に、デバッグを楽にしてくれる使い方を紹介します。JavaScriptとそれに関わるDOM、CSSを効率よくデバッグしましょう。

第5回 モバイルサイトのデバッグ

モバイルサイトに実機検証は欠かせませんが、ブラウザに比べてデバッグが難しいのも確か。この記事では、実機でのデバッグを効率化する「リモートデバッグ」を解説します。

第4回 メモリリークのデバッグ

メモリ使用量の確認など基礎的な手法を使いながら、メモリリークの場所を突き止め、そのデバッグを行う一連の流れを追ってみましょう。Backbone.jsを用いたコードをサンプルとしています。

第3回 メモリとガーベジコレクション

今回からはJavaScriptにおけるメモリリークのデバッグについて解説します。今回はメモリ確保と解放の仕組みと、メモリの状態を検証する基本的な手法を紹介します。

第2回 ブレークポイントのさまざまな設定方法

ブレークポイントは、ただ所定の行に設定するだけでなく、イベント発生時や、例外発生時など、さまざまな状況に対して設定することができます。その設定方法を解説します。

第1回 ブレークポイントの使用

Chromeのデベロッパーツールを例に、ブレークポイントの使い方を解説します。プログラムの任意の行を基準に、処理が進む過程をコントロールしながら、関数の実行や、変数の内容などを検証していくことができます。