※当サイトの記事には、広告・プロモーションが含まれます。

VS Code(Visual Studio Code)でTypeScriptのデバッグをしてみる

f:id:ts0818:20211231164956j:plain

www.itmedia.co.jp

 京都大学は12月28日、同学のスーパーコンピュータに保存していたデータ約77TBが消失したと発表した。うち約28TBはバックアップがなく復元不能という。原因は日本ヒューレット・パッカード(HPE)製バックアッププログラムの不具合で、同社は「100%弊社の責」と謝罪している。

京大スパコンのデータ77TBが消失 バックアップ処理中に不具合 日本ヒューレット・パッカード「100%弊社の責任」 - ITmedia NEWS

⇧「ヒューレット・パッカード」がというのが、なかなか衝撃...

qiita.com

さて、最近になって似たような攻撃に関する論文が公開されました
人間には見えない文字を織り交ぜることによって、一見問題ないコードが実は脆弱になってしまうというものです。

StackOverflowからのコピペをやめろ。今すぐにだ。 - Qiita

⇧ この世は、「性悪説」で成り立っていると考える「ゼロトラスト」の考えがありますが、たった1つの悪意の可能性が存在するだけで様々なコストが嵩むので、本当に勘弁して欲しいですね...

まぁ、ドキュメントで網羅できていれば、「StackOverflow」とか参照することもないわけだから、ドキュメントを整備して欲しい気はしますかね...

そして、Javaの「Apache Log4j2」に新たな脆弱性が...

logging.apache.org

CVE-2021-44832: Apache Log4j2 vulnerable to RCE via JDBC Appender when attacker controls configuration

https://logging.apache.org/log4j/2.x/security.html#CVE-2021-44832

Note that only the log4j-core JAR file is impacted by this vulnerability. Applications using only the log4j-api JAR file without the log4j-core JAR file are not impacted by this vulnerability.

https://logging.apache.org/log4j/2.x/security.html#CVE-2021-44832

⇧ 影響を受ける場合については、「CVE-2021-45105」の時と変わってない模様。

今回も「TypeScript」について、というよりも「VS CodeVisual Studio Code)」とかの話かしら。

レッツトライ~。

VS CodeVisual Studio Code)でTypeScript のデバッグで設定がいろいろ必要な件

VS CodeVisual Studio Code)」のGUI上から「TypeScript」を「実行」するのに「拡張機能」を追加したり、「npm」のモジュールの追加が必要だったりと、何かとイケてない「VS CodeVisual Studio Code)」なのですが、

code.visualstudio.com

VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript.

https://code.visualstudio.com/docs/editor/debugging

For debugging other languages and runtimes (including PHPRubyGoC#PythonC++PowerShell and many others), look for Debuggers extensions in the VS Code Marketplace or select Install Additional Debuggers in the top-level Run menu.

https://code.visualstudio.com/docs/editor/debugging

⇧「デバッグ」については「TypeScript」と「JavaScript」については「拡張機能」の追加は不要で利用できるってドキュメントに記載がありますと。

だが、しかし!

code.visualstudio.com

何やら、「VS CodeVisual Studio Code)」で「TypeScript」を実行するには、「launch.json」ファイルを作成して「設定」しておくのが良いみたい...

今回、利用している「TypeScript」のプロジェクトは、

ts0818.hatenablog.com

⇧ 上記の記事で使ってるものです。

というわけで「VS CodeVisual Studio Code)」で「launch.json」ファイルの作成。

f:id:ts0818:20211229134849p:plain

「Node.js」を選択しておきました。

f:id:ts0818:20211229135214p:plain

「Workspace Settings」である「.vscode」フォルダに「launch.json」ファイルが追加されたようです。

f:id:ts0818:20211229135332p:plain

「launch.json」ファイルの設定ですが、「ts-node」とかを使っていない場合は、

knooto.info

※ ラベルは後述の launch.json の preLaunchTask に設定するために使用します。
公式や英語圏の説明では launch.json の preLaunchTask は "preLaunchTask": "tsc: build - tsconfig.json" とする形になっているのですが、日本語化された Visual Studio Code では "preLaunchTask": "tsc: ビルド - tsconfig.json" としないと動作しないなど環境によって微妙な部分がありそうなため、上記のようにしています。
"preLaunchTask": "tsc: ビルド - tsconfig.json" でよければこの「ビルドタスクの設定」で行う手順は不要です。

Visual Studio Code で TypeScript 環境を設定してデバッグ実行する | knooto

⇧ 上記サイト様が参考になるかと。

で、「ts-node」とか使ってる場合は、

www.walbrix.co.jp

qiita.com

github.com

⇧ 上記サイト様が参考になるかと。

「esbuild-register」とか使ってる場合は、

github.com

It will use jsxFactoryjsxFragmentFactory and target options from your tsconfig.json

https://github.com/egoist/esbuild-register

⇧ なんか、「tsconfig.json」ファイルの「設定」うち、上記の3つしか利用できないってことなんかな?

「esbuild-register」自体の「tsconfig.json」ファイルの「設定」を見た感じ、

github.com

⇧ 他にも、いろいろ「設定」されてはいるっぽいのだけど、如何せん、説明が少な過ぎて、よう分からん...

github.com

About

Transpile JSX, TypeScript and esnext features on the fly with esbuild

https://github.com/egoist/esbuild-register

⇧ 一応、「esbuild」を使ったモジュールということではあるらしいのだけど、「esbuild」って何なのか?

esbuildとは?

ググってみたところ、

zenn.dev

esbuild は、キャッシュなしで高速なビルドを可能とする Node.js のビルドツールです。

Node.js のビルドツール「esbuild」について!

ビルドツールには、esbuild の他に、Webpack、Gulp、Parcel、Rollup、Browserify、FuseBox などがあります。

Node.js のビルドツール「esbuild」について!

⇧ ということみたい。

「esbuild-register」は「esbuild」を利用したモジュールということらしいので、「Node.js」の「ビルドツール」の1種と言えるってことかしら?

デバッグ自体は動いたけど...

で、「esbuild-register」で「デバッグ」してみたけども、「.js」ファイルは作成されないらしい、そりゃ、実行速度も上がるでしょ...

ちなみに「launch.json」ファイルの「設定」は以下。

■C:\Users\Toshinobu\Desktop\soft_work\typescript_work\.vscode\launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            // "program": "${workspaceFolder}\\src\\main.ts",
            // "preLaunchTask": "tsc: build - tsconfig.json",
            // "outFiles": [
            //     "${workspaceFolder}/dist/*.js"
            // ],
            "runtimeArgs": [
                "--nolazy",
                "-r",
                //"ts-node/register",
                "esbuild-register"
            ],
            "program": "${file}",
            //"env": { "TS_NODE_PROJECT": "tsconfig.json" }
            // "args": [
            //     "${workspaceFolder}/src/main.ts"
            // ]
        }
    ]
}

⇧ 他の「設定」は、前回記事と同じです。

で、「デバッグ」したいファイルを開いた状態で(適当な場所に「ブレークポイント」を設定しておいて)、f:id:ts0818:20211231160425p:plain をクリック。

f:id:ts0818:20211231160351p:plain

ブレークポイント」を設定した行に止まったら、「デバッグ」が上手くいっているようです。

f:id:ts0818:20211231160625p:plain

「変数」の中身とかも確認できる模様。

f:id:ts0818:20211231160811p:plain

表示されてるバーの中から、

  • ステップ オーバー(F10)
  • ステップ インする(F11)
  • ステップ アウト(Shift + F11)

のいずれかで「デバッグ」を進める感じ。

f:id:ts0818:20211231160951p:plain

何て言うか、「VS CodeVisual Studio Code)」で「TypeScript」を扱う場合にいろいろインストールしたり、「設定」が必要だったりで、環境を統一するのが難しそうなイメージが...

Dockerとかのようなコンテナimageとかで環境を用意しないと、開発でありがちな「自分の環境では動く」問題が起きがちですね...

まぁ、「VS CodeVisual Studio Code)」に限った話ではないと思うけど、環境構築の問題は永遠のテーマなのだろうか...

毎回モヤモヤ感が半端ない...

今回はこのへんで。