【Javascript】chrome環境でサンプルファイル実行時、エラーが表示され実行できない

slip

VisualStudioCodeを用いてゲームを作成しています。
VisualStudioCodeにて、cubism 3.0 sdkのサンプルファイルをchrome環境で実行したのですが、
表記のエラーが表示され実行できませんでした。
※Firefoxでは実行できました。

調査中ですが、何かご助言等頂けましたら幸いです。
よろしくお願いします。

[参考]
・VisualStudioCodeでのlaunch.json

{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
"runtimeArgs": [
"--allow-file-access-from-files",
"--remote-debugging-port=9222",
"--user-data-dir=/tmp"
]
}
]
}

・デバッグコンソールの出力
TypeError: Cannot read property '_ptr' of null
live2dcubismcore.min.js:1
at new Model (https://s3-ap-northeast-1.amazonaws.com/cubism3.live2d.com/sdk/js_eap/live2dcubismcore.min.js:1:153296)
at Function.Model.fromMoc (https://s3-ap-northeast-1.amazonaws.com/cubism3.live2d.com/sdk/js_eap/live2dcubismcore.min.js:1:153518)
at ModelBuilder.build (file:///G:/Game_illust/01_Live2d/Cubism3.0/CubismJsComponents-master/example/wwwroot/js/live2dcubismpixi.js:367:52)
at file:///G:/Game_illust/01_Live2d/Cubism3.0/CubismJsComponents-master/example/wwwroot/js/pixiKoharu.js:16:14
at t.value (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:8:29897)
at e.t._onComplete (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:9:12816)
at https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:9:13309
at s (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:9:24311)
at e. (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:19:23843)
at https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:9:13007

[削除されたユーザー]

@slip 様
お世話になっております。Live2Dスタッフです。
ご報告いただいた件につきまして、当方でも同様の事象が発生することを確認しました。

■環境
OS: Windows10 64bit
Chrome v64.0
Visual Studio Code: v1.19.3
　アドオン:
　・Debugger for Chrome v4.1.0 (https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
　・Debugger for Firefox v1.1.0 (https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug)

■確認した事象
　・Debugger for Chromeでサンプルを実行 ⇒ 同様のエラーログを出力
　・Debugger for Firefoxでサンプルを実行 ⇒ 正常に実行（Webサーバ経由の読み込みと同様の挙動）

※Launch.jsonにChrome起動時に以下の引数を渡してテスト
"runtimeArgs": [
"--allow-file-access-from-files",
"--remote-debugging-port=9222",
"--user-data-dir=/tmp"
]

当方の環境でも、@slip 様と同様の事象が発生すること、またFirefoxでは正常に実行できるのに対してChromeでは正常に実行できていないことから、Chrome側の挙動に原因があることが想定されます。ですので、現状以上の解析となりますと、Chrome自体の実装がどのようになっているかを調査・解析する必要があるかと思われます。

■暫定の対処方法
さて、上記事情を踏まえまして、Visual Studio CodeとLive Serverアドオンを利用したデバッグ実行の方法を提案させて頂きます。
@slip 様がお試しになられた方法を完全に置き換えできるほどのものではないかもしれませんが、ご参考いただければと思います。
・Live Server (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

▼Live Server を利用したデバッグ実行の手順
1. Live Serverアドオンをインストール


2. wwwroot/index.html をLive Serverアドオンで開く


3. Launch.jsonに以下を記述（ご参考）
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Live Server website",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/(index.htmlまでのディレクトリ)/index.html",
"webRoot": "${workspaceRoot}/",
"sourceMaps": false
}
]
}

4. Visual Studio Codeのデバッガで上記"Launch Live Server website"を実行


5. Chromeが起動する
JavaScriptのコードに貼ったブレークポイントで止まることも確認しております。


[参考情報] Visual Studio Codeを使いこなせ！ Chromeと接続してJSをデバッグする方法 (https://ics.media/entry/11356)

slip

shio_tatsu (Staff) さん
回答ありがとうございます！
試してみたのですが、”Cannot GET /G:/wwwroot/index.html”と表示され、デバッグできませんでした。

Launch.jsonは以下になります。
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Live Server website",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/G:/wwwroot/index.html",
"webRoot": "${workspaceRoot}/",
"sourceMaps": false
}
]
}

[削除されたユーザー]

@slip 様
お試しいただきありがとうございます。
一部説明不足のところがあり、申し訳ございませんでした。
Launch.json の "url" の値ですが、こちらは、【ローカルホストのURL】+【Visual Studio Codeで開いているフォルダを基準とするindex.htmlまでのパス】を与えてください。その値を確認する方法として、以下に幾つかのケースでの具体的な例を示します。

-----------------------------------------------------------------------------------------------------------------

■ケース１： Visual Studio Codeで【wwwroot】フォルダを開いている場合

1. index.html を右クリック → [Open with Live Server]をクリック


2. ブラウザが起動する


3. ブラウザのURLを確認する



4. この時のブラウザのURLを Launch.json の "url" の値に入力する
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Live Server website",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/index.html",
"webRoot": "${workspaceRoot}/",
"sourceMaps": false
}
]
}

-----------------------------------------------------------------------------------------------------------------

■ケース２：Visual Studio Codeで【CubismJsComponents-master】フォルダを開いている場合

1. example/wwwroot/index.html を右クリック → [Open with Live Server]をクリック


2. ブラウザが起動する


3. ブラウザのURLを確認する



4. この時のブラウザのURLを Launch.json の "url" の値に入力する
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Live Server website",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/example/wwwroot/index.html",
"webRoot": "${workspaceRoot}/",
"sourceMaps": false
}
]
}

-----------------------------------------------------------------------------------------------------------------
以上、具体例を示しておりますが、"url"の値につきましてはVisual Studio Codeでどこのフォルダを開いているかによって異なりますので、@slip 様のご環境と、Live Serverの挙動をご確認いただきながらお試しいただければと思います。

slip

shio_tatsu (Staff) さん
urlを修正したところ、chrome環境で起動できました！
詳細な説明と回答の対応ありがとうございます。