目次
はじめに
第1章 デバッグ機能とは
第2章 Debugger UI
第3章 デバッグフレームワーク
第4章 各言語のデバッグの機能調査
第5章 Go
第6章 Google App Engine Go
第7章 Node.js: JavaScript and TypeScript for Server-Side
第8章 Chrome: JavaScript and TypeScript for Web Front-End
第9章 React: JavaScript and TypeScript for SPA
第10章 Electron: JavaScript and TypeScript for PC Appliction
第11章 C/C++
第12章 Python
第13章 Ruby
第14章 Ruby on Rails
第15章 PHP
第16章 Java
第17章 C# (.NET Core)
第18章 Bash: シェルスクリプト
おわりに
はじめに
本書を手に取っている方はVisual Studio Code（以降、本書内ではVSCodeと表記）を使用または使用を検討されている方々だと思う。数あるエディターの中からVSCodeを選ぶ理由として挙げられるのは、VSCodeがデバッグ機能を持っていることである。しかし、デバッグ機能を使うためには設定ファイルへの記述が必要であり、その記述の方法も言語とプラットフォームごとに異なり簡単ではない。本書はVSCodeのデバッグの仕組みを解説し、各言語、プラットフォームそれぞれにおける設定ファイルの記述の仕方を解説する。この本がVSCodeでデバッグをする上での助けになればと思う。
第1章では、VSCodeにおけるデバッグ機能の立ち位置について解説する。第2章では、VSCodeのデバッグ機能のユーザーインターフェースについて解説する。第3章では、VSCodeがデバッグ機能を実現する仕組みを解説する。第4章以降は、各言語、プラットフォームでの、デバッグ機能の性能及び、設定ファイルの記述の仕方を解説する。
ソースコードと調査結果
4章以降において、OS毎にVSCodeの環境構築方法、及び個別の実行方法についても調査し、記述している。また実行対象ごとに、デバッグ実行の設定ファイルである.vscode/launch.jsonの記述の例を掲載している。この結果や、調査に使用したソースコード及び結果は次のリポジトリーでで公開している。誤りや、拡張機能の更新による機能向上が見られる場合などあれば、GitHub上で指摘をお願いしたい。また各言語、プラットフォームについて、著者は自分の専門ではない対象についても記述している。コードの間違いや、スタンダードではない部分が含まれている可能性があるので、コード中に問題があればGitHubで指摘をお願いしたい。
免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。
表記関係について
本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。
底本について
本書籍は、技術系同人誌即売会「技術書典4」で頒布されたものを底本としています。
第1章 デバッグ機能とは
1.1 VSCode（Visual Studio Code）について
VSCodeは、2015年にMicrosoftが公開したオープンソースのエディターである。Visual Studioと名前がついているが、従来のVisual Studioとはかなり特徴が異なる。
|
|
Visual Studio | Visual Studio Code |
| ソフトウェアの種別 | プロプライエタリ | オープンソース（MIT） |
| 位置づけ | 統合開発環境（IDE） | エディター |
| 開発対象 | .NET Framework等限られたもの | すべて（拡張機能による） |
| コンパイラ | .NET等含む | 含まない |
| コード補完 | あり | あり（拡張機能による） |
| デバッグ機能 | あり | あり（拡張機能による） |
| ファイル管理 | .NETのプロジェクトファイルに従う | ディレクトリーのみ |
従来のVisual Studioが .NET Framework等のMicrosoftが提供するプラットフォーム上で動作するプログラムを開発するための開発環境であったのに対し、VSCodeは拡張機能を介することであらゆる言語、プラットフォームに対してVisual Studioと同様の開発環境を実現している。
開発者がVisual StudioなどのIDEが得意とするプラットフォームから少しでも離れると、従来はVimやEmacsと言ったエディターで開発を行っていた。近年、Vimのプラグインの充実や、強力なプラグインシステムを持つAtomの登場により利便性は高くなっていたが、多くの煩雑なプラグインを使いこなすにはエディター自体の習熟が必要であった。VSCodeは、拡張可能な部分についてVisual Studioらしさを補う部分のみに絞ることで、高機能ながらスマートな開発環境になっている。特に、ツールを習熟しなくても十分に使える点は、開発ツールの選定を行う立場にとっては非常に都合が良いと言える。
筆者は多くの作業をVimで行うが、デバッグやコード補完が活用できるGoやPythonの開発では、VSCodeを利用している。また、筆者はVimのキーバインドを実現する拡張機能VimStyle1を公開している。そして、業務でも仕事仲間にVSCodeを使うように勧めている。
本書では、VSCodeのデバッグ機能に絞って解説する。
1.2 デバッグ機能とは
Googleで「デバッグとは」と検索すると、次の答えが表示される。
《名・ス他》コンピュータのプログラムの誤り（＝バグ）を見つけ、手直しをすること。デバッギング。虫取り。
本書で扱うデバッグ機能はこの「デバッグ」を支援する機能のことを指す。その中でも、デバッグ機能の中核となるのは、動かしているプログラムを一時中断させ、変数や実行経路を確認しながら、プログラムを動作させることにある。本書では、デバッグ機能を次のように定義する。
・プログラムを、特定の条件において中断（ブレーク）させることができること
・中断したプログラムにおいて、変数の状態を確認できること
・中断したプログラムにおいて、コールスタック（メソッドの呼び出し関係）が確認できること
・中断したプログラムをソースコード上で1行ずつ実行すること（ステップ実行）ができること
このようなデバッグ機能を提供するソフトウェアを「デバッガ」という。
1.3 デバッガを実現するためには
デバッガを実現するためには、その言語のコンパイラやランタイムがステップ実行できる環境を提供していなければならない。最近の言語であれば、登場時からデバッガのAPIを持っていることも多い。また、コンパイル時に動作の効率を代償にしてでも、デバッグに関する情報を付加し、ステップ実行できる状態にするものも多い。
CやGoのようにコンパイルを必要とする言語の場合、ソースコードの1行とコンパイル後の1ステップは必ずしも対応しない。そのため、CやGoのデバッグにおいては、コンパイル時の最適化をオフにするオプションを追加することで、ソースコードに近い状態でデバッグすることができる。
また、コンパイル後のプログラムは、必ずしもソースコードの情報を持っていない。そのため、JavaScriptをブラウザで実行できる形式にまとめるwebpackなどでは、コンパイル時に元のソースとの対応を示すソースマップを追加する機能を持っている。
本書ではVSCodeでデバッグ機能の性能を示していくが、デバッグの機能の多くは、その言語のコンパイラや実行環境が提供しており、その支援で成り立っている事を忘れてはならない。
1.4 GDB（GNUデバッガ）
デバッガを実現するソフトウェアとして最も有名なものは、GNUの一つであるGDB（GNUデバッガ）である。GDBはCUIで、主にC、C++のプログラムに対して、デバッグ機能を実現するソフトウェアである。GDBのコマンドの一例を挙げる。
| コマンド | 説明 |
| break source.c:10 | source.cの10行目にブレークポイントを設定する |
| print var | 変数varの中身を出力する |
| backtrace | すべてのスタックトレースを出力する |
| next | ステップ実行する |
このように、GDBは前節で挙げたデバッグ機能を全て持っている。しかし、GDBはCUIであり（GDBにはTUIモードもあるが）、ソースコードの編集とは全く別に行われる。現代のデバッグ作業においては、ソースコードを閲覧しながら、マウスを用いてブレークポイントの設定などを行うのが一般的である。GDBを視覚的に操作できるフロントエンドとして、DDD（Data Display Debugger）がある。DDDの画面を次のように示す。
DDDはGDBにあるコマンドをGUIのボタンで利用者に提供し、またブレークポイントの設定をソースコードのクリック操作で可能にする。このように、GNUのデバッガは、GDBとDDDで、CUIとGUIで機能を分けて提供されている。
1.5 VSCodeのデバッグ機能のアーキテクチャ
VSCodeは言語ごとに拡張機能を用意することで、多くの言語、プラットフォームにデバッグ機能を提供する。このデバッグ機能のアーキテクチャの概要図を次のように引用する2。
デバッグ機能は、"Debugger UI"、"Debug Adapter"、"Debugger"の階層に分かれている。"Debugger UI"はVSCodeのすべての言語に共通して提供するUIである。各言語の拡張機能は"Debug Adapeter"を作成することで、各々の言語が提供するデバッガと"Debugger UI"を接続し、デバッグ機能を利用できるようにする。GNUのDDDに相当するものが、"Debugger UI"と"Debug Adapter"であり、GDBはVSCodeでも"Debugger"として利用される。
共通の"Debugger UI"と各"Debug Adapter"を繋ぐ部分は、"Debug Adapter Protocol"として定義されている。各拡張機能は、この"Debug Adapter Protocol"に従って実装されている。
第2章では"Debugger UI"が持つ機能について説明し、第3章では"Debug Adapter"と"Debug Adapter Protocol"について説明する。
第2章 Debugger UI
本章では、VSCodeのDebugger UIについて、すべての機能を網羅して説明する。しかし、本章に示す機能は、言語、プラットフォームによっては利用できないものもあるため注意してほしい。
Debugger UIに関する公式のテキストはVSCodeのWebサイト1にある。
2.1 画面構成
デバッグ画面に入るには、左のタブの虫のマークを選ぶ。
デバッグ画面の構成と、各ボタンの詳細を次のように示す。
この画面の各機能について、説明する。
2.2 Debugメニュー
デバッグ機能の利用には、上に示した画面の操作でほぼ可能であるが、メニューバーの中のデバッグの項目から操作することも可能である。
日本語のメニューと英語のメニューを掲載する。
