私は Typescript と、Typescript によって公開されている ES6 文字列リテラルなどのいくつかの ES6 機能を使用するプロジェクトに取り組んでいます`Something ${variable} Something else`。
問題をデバッグしているときに、TypeScript ファイルにブレークポイントを設定して、ソース パネルでステップ実行してみましたが、通常は問題なく動作します。
しかし、Chrome Dev Tools には ES6 文字列リテラルに関する問題があり、ES6 文字列リテラルの終わりを認識しないようです。
代わりに、文字列リテラルに続くすべてのコードは赤でマークされ (デバッガーで文字列が強調表示)、Chrome デバッガーはそれをすべて 1 つの巨大な文字列であると認識するため、変数の検査がブロックされます。
この問題に遭遇した人、修正方法を見つけた人、またはこれが Google の Chrome Dev Tools のロードマップに含まれているかどうかを知っている人はいますか?
編集1:
この問題は現在 Chromium チームによって解決されているようです。最新情報については問題レポートを参照してください:
バグ:
編集2:バグはかなり前から公開されていますが、優先順位が付けられていないようです。問題が発生した場合は、上記の Chromium リンクにアクセスし、役立つ情報とともにスターを付けたりコメントしたりして、開発ツール チームの焦点にしてください。
ベストアンサー1
Ubuntu のバージョン 69.0.3497.100 (公式ビルド) (64 ビット) にはまだバグがあります。
回避策として、//`テンプレート化された文字列を含む行の末尾に: を追加すると、Chrome のソース タブの書式が修正されます。
ここに、実際に動作する jsx コードの例をいくつか示します。
コンポーネントのプロパティ内:
<Field
name={`${fields.name}[${index}].comments`}// `
component="input"
type="text"
/>
子要素として:
<label>
{`${t('Condone')} `}{/* ` */}
</label>
声明では次のように述べている。
switch (DEBTTYPE) {
case DEBTTYPE_MACHINE_PRODUCT:
id = `machine_product_difference_row_${row.id_productdebt}`;// `
break;
....
この問題ができるだけ早く解決されることを心から願っています。