使用 chrome Web 开发人员工具的 Angular 2 CLI 项目中未显示 Typescript 文件
Typescript files not showing in Angular 2 CLI project using chrome web developer tools
我使用 angular2 CLI (ember cli) 生成了一个打字稿项目。我正在使用 Chromium Web Developer 工具进行调试。我在开发人员工具设置中 "enable javascript source maps" selected。我看到源视图中列出了 .js 文件和 .ts。但是，当我 select 时，.ts（打字稿）文件显示为空，即无法找到它们。
显示情况的屏幕截图：
如果我 select 我 可以 看到 .js 文件的文本。
.ts 文件没有 复制到 dist 目录中，这对我来说似乎是个问题，但我已经看到 examples elsewhere 显示典型的 angular2 cli dist 结构，它们也没有 .ts 文件。
我的 "tsconfig.json" 的相关部分显示我启用了源映射：
1 "compileOnSave": false,
2 "compilerOptions": {
3 "declaration": false,
4 "emitDecoratorMetadata": true,
5 "experimentalDecorators": true,
6 "mapRoot": "",
7 "module": "system",
8 "moduleResolution": "node",
9 "noEmitOnError": true,
10 "noImplicitAny": false,
11 "outDir": "../dist/",
12 "rootDir": ".",
13 "sourceMap": true,
14 "sourceRoot": "/",
15 "target": "es5"
16 },
js.map 文件 是 生成的并驻留在 .js 文件旁边的 dist 目录中。
示例映射文件（部分）：
{"version":3,"file":"app.js","sourceRoot":"/","sources":["app.ts"],"names":[],"mappings":";;;;;;;;;;;;;YAGA,mB
我试过：
1) 将 .ts 文件从 src 复制到 dist.
2) 各种手动编辑 app.js.map 文件的尝试，例如 sourceRoot 和 sources。
不太清楚js.map文件中的“/”指的是什么：项目的src目录还是dist目录？如果我编辑 .js.map 文件，是否必须刷新浏览器才能使用它？
我认为基本问题是它在 src 目录中寻找 ts 文件，而这超出了浏览器的范围（因为它位于“../src”）。
Chromium 将 ts 文件的路径显示为“http://localhost:4202/app/cpp-scenes.ts”。但是当我把 .ts 文件放在那里时，没有骰子。
不知道是js映射问题，Angular2问题，Angular2 CLI问题，还是typescript问题
当控制台显示 "error in line 52 in blah.ts" 时，这真的很痛苦，但我不能跳到那里并设置断点等。
有没有其他人有幸在 Angular2 CLI 项目中获得源映射？
我能够让它工作。您必须将 angular CLI src 文件夹添加到您的工作区，然后您的其中一个 .ts 文件上有 "map to network resource"。
Note: this example assumes the case where the client and server are
running on the same machine. If you have the situation where the
client is on a windows machine, but the server is running on linux for example,
then on the client machine you have to mount the linux server source directory as a windows
share and then specify something like
\192.168.1.134\myShare\myProject\src\client
as your workspace folder.
I recently had to do this, and while it's a little more complicated, it fundamentally works the same as the local case
我拍了整个过程的屏幕截图，所以只显示这些可能是最简单的。
- Select 位于 dist 目录下的 ts 文件之一（对应于 ng serve 的目录正在服务于）和 select "Add folder to workspace":
Select 您的 src/client 文件夹：
对后续提示说 "Allow" 允许开发工具访问 src 目录：
观察到 src 文件夹现在列在 Dev Tools sources 下。您现在可以浏览所有 ts 文件（不仅仅是您添加的文件），但是您设置的任何断点在您 "establish a mapping" 之前不会生效：
您可以启用映射，如下两个屏幕截图所示：
Select合适的映射点击启用
现在我可以在 .ts 文件中设置断点并将错误消息向下钻取到 .ts 源。
基本技巧是您必须手动将源 ts 文件目录添加到 Chrome，因为这些文件不在服务目录下。映射保持有效，直到您手动删除它（通过 right-clicking 在 .ts 文件上和 selecting "remove network mapping"）或直到您关闭浏览器（它将在刷新时保留映射然而）
不确定是什么问题，但我没有遇到过。它开箱即用，不需要复杂的五步过程。
.ts 文件没有也不应复制到 /dist 文件夹。复制的是 .map 文件，其中包含对源文件夹的引用。 Chrome 开发人员工具在其“源”选项卡下显示所有 .ts 文件——橙色文件夹。
除了 运行 "ng serve"，浏览到 http://localhost:4200 并打开开发者工具外，我没有采取任何其他操作。我可以打开列出的 .ts 文件之一（它们列在橙色文件夹中）、设置断点等。
简介：
我是 2016-06-04 上发布的答案的原始发布者和提供者。
我最近发现了一种更简单的方法来实现这一点。我将此作为第二个答案发布，因为我原来的答案仍然有效，有些人可能更喜欢它。但是，我认为我将要描述的新方法要简单一些。
解决方案概述：
基本上，您可以在 DeveloperTools->Settings->Workspace 菜单下设置所有内容，而不用右键单击所有内容。右键单击我的原始答案本质上只是填充此工作区表单的另一种方式。
- 您想像这样进入 DeveloperTools->Settings 对话框：
- 然后转到 Workspace 部分并继续 Local Server Solution 或 Remote Server Solution 描述如下。
本地服务器解决方案：
以下是当您的服务器和浏览器 运行 在同一台机器上时的一些屏幕截图：
- 在工作区对话框中，添加项目的 'src/client' 目录，以及到“/”的映射。下面是服务器 ('ng serve') 和浏览器在同一台机器上时应该是什么样子的示例：
远程服务器解决方案：
以下是当您的服务器和浏览器是 运行 不同机器时的一些屏幕打印：
- 如果您的服务器 运行 在 Linux 上，但您的浏览器在另一台机器上 运行，例如 windows，您可以在您的计算机上创建一个 samba 共享linux 并将其作为驱动器安装在 windows.
上
来自 windows 命令提示符（实际上是 git bash shell）：
>$ net view
Server Name Remark
-------------------------------------------------------------------------------
\VT-VIRTUAL vt-virtual-machine server (Samba, Linux Min
The command completed successfully.
>$ net use l: '\vt-virtual\vtstuff'
- 然后将您的工作区设置为如下所示：
结论：
这样做可以保留跨浏览器循环的信息，因此您只需要做一次。也许在 2016-07-30 上发帖的人，他说这对他有用 "out of the box"，不知何故已经设置了这个工作区表单。
我现在明白这是一个 Chrome 开发者工具 设置问题，与 Angular2 或 Angular2 CLI。只是使用 angular2 CLI 的人需要做这个工作区映射，因为源（.ts）文件不能直接在运行时（dist）目录中获得。
似乎 Angular CLI 的基本配置使用了 Webpack，所有 TypeScript 文件都可以在其 src 目录中找到，因此可以在不使用调试器语句的情况下放置断点。
打开 chrome Devtools >设置（devtools 屏幕上的齿轮图标）>首选项 >select“启用 javascrpt 源映射”
我使用 angular2 CLI (ember cli) 生成了一个打字稿项目。我正在使用 Chromium Web Developer 工具进行调试。我在开发人员工具设置中 "enable javascript source maps" selected。我看到源视图中列出了 .js 文件和 .ts。但是，当我 select 时，.ts（打字稿）文件显示为空，即无法找到它们。
显示情况的屏幕截图：
如果我 select 我 可以 看到 .js 文件的文本。
.ts 文件没有 复制到 dist 目录中，这对我来说似乎是个问题，但我已经看到 examples elsewhere 显示典型的 angular2 cli dist 结构，它们也没有 .ts 文件。
我的 "tsconfig.json" 的相关部分显示我启用了源映射：
1 "compileOnSave": false,
2 "compilerOptions": {
3 "declaration": false,
4 "emitDecoratorMetadata": true,
5 "experimentalDecorators": true,
6 "mapRoot": "",
7 "module": "system",
8 "moduleResolution": "node",
9 "noEmitOnError": true,
10 "noImplicitAny": false,
11 "outDir": "../dist/",
12 "rootDir": ".",
13 "sourceMap": true,
14 "sourceRoot": "/",
15 "target": "es5"
16 },
js.map 文件 是 生成的并驻留在 .js 文件旁边的 dist 目录中。
示例映射文件（部分）：
{"version":3,"file":"app.js","sourceRoot":"/","sources":["app.ts"],"names":[],"mappings":";;;;;;;;;;;;;YAGA,mB
我试过：
1) 将 .ts 文件从 src 复制到 dist.
2) 各种手动编辑 app.js.map 文件的尝试，例如 sourceRoot 和 sources。
不太清楚js.map文件中的“/”指的是什么：项目的src目录还是dist目录？如果我编辑 .js.map 文件，是否必须刷新浏览器才能使用它？
我认为基本问题是它在 src 目录中寻找 ts 文件，而这超出了浏览器的范围（因为它位于“../src”）。
Chromium 将 ts 文件的路径显示为“http://localhost:4202/app/cpp-scenes.ts”。但是当我把 .ts 文件放在那里时，没有骰子。
不知道是js映射问题，Angular2问题，Angular2 CLI问题，还是typescript问题
当控制台显示 "error in line 52 in blah.ts" 时，这真的很痛苦，但我不能跳到那里并设置断点等。
有没有其他人有幸在 Angular2 CLI 项目中获得源映射？
我能够让它工作。您必须将 angular CLI src 文件夹添加到您的工作区，然后您的其中一个 .ts 文件上有 "map to network resource"。
Note: this example assumes the case where the client and server are running on the same machine. If you have the situation where the client is on a windows machine, but the server is running on linux for example, then on the client machine you have to mount the linux server source directory as a windows share and then specify something like
\192.168.1.134\myShare\myProject\src\clientas your workspace folder.
I recently had to do this, and while it's a little more complicated, it fundamentally works the same as the local case
我拍了整个过程的屏幕截图，所以只显示这些可能是最简单的。
- Select 位于 dist 目录下的 ts 文件之一（对应于 ng serve 的目录正在服务于）和 select "Add folder to workspace":
Select 您的 src/client 文件夹：
对后续提示说 "Allow" 允许开发工具访问 src 目录：
观察到 src 文件夹现在列在 Dev Tools sources 下。您现在可以浏览所有 ts 文件（不仅仅是您添加的文件），但是您设置的任何断点在您 "establish a mapping" 之前不会生效：
您可以启用映射，如下两个屏幕截图所示：
Select合适的映射点击启用
现在我可以在 .ts 文件中设置断点并将错误消息向下钻取到 .ts 源。
基本技巧是您必须手动将源 ts 文件目录添加到 Chrome，因为这些文件不在服务目录下。映射保持有效，直到您手动删除它（通过 right-clicking 在 .ts 文件上和 selecting "remove network mapping"）或直到您关闭浏览器（它将在刷新时保留映射然而）
不确定是什么问题，但我没有遇到过。它开箱即用，不需要复杂的五步过程。
.ts 文件没有也不应复制到 /dist 文件夹。复制的是 .map 文件，其中包含对源文件夹的引用。 Chrome 开发人员工具在其“源”选项卡下显示所有 .ts 文件——橙色文件夹。
除了 运行 "ng serve"，浏览到 http://localhost:4200 并打开开发者工具外，我没有采取任何其他操作。我可以打开列出的 .ts 文件之一（它们列在橙色文件夹中）、设置断点等。
简介：
我是 2016-06-04 上发布的答案的原始发布者和提供者。
我最近发现了一种更简单的方法来实现这一点。我将此作为第二个答案发布，因为我原来的答案仍然有效，有些人可能更喜欢它。但是，我认为我将要描述的新方法要简单一些。
解决方案概述：
基本上，您可以在 DeveloperTools->Settings->Workspace 菜单下设置所有内容，而不用右键单击所有内容。右键单击我的原始答案本质上只是填充此工作区表单的另一种方式。
- 您想像这样进入 DeveloperTools->Settings 对话框：
- 然后转到 Workspace 部分并继续 Local Server Solution 或 Remote Server Solution 描述如下。
本地服务器解决方案：
以下是当您的服务器和浏览器 运行 在同一台机器上时的一些屏幕截图：
- 在工作区对话框中，添加项目的 'src/client' 目录，以及到“/”的映射。下面是服务器 ('ng serve') 和浏览器在同一台机器上时应该是什么样子的示例：
远程服务器解决方案：
以下是当您的服务器和浏览器是 运行 不同机器时的一些屏幕打印：
- 如果您的服务器 运行 在 Linux 上，但您的浏览器在另一台机器上 运行，例如 windows，您可以在您的计算机上创建一个 samba 共享linux 并将其作为驱动器安装在 windows. 上
来自 windows 命令提示符（实际上是 git bash shell）：
>$ net view
Server Name Remark
-------------------------------------------------------------------------------
\VT-VIRTUAL vt-virtual-machine server (Samba, Linux Min
The command completed successfully.
>$ net use l: '\vt-virtual\vtstuff'
- 然后将您的工作区设置为如下所示：
结论：
这样做可以保留跨浏览器循环的信息，因此您只需要做一次。也许在 2016-07-30 上发帖的人，他说这对他有用 "out of the box"，不知何故已经设置了这个工作区表单。
我现在明白这是一个 Chrome 开发者工具 设置问题，与 Angular2 或 Angular2 CLI。只是使用 angular2 CLI 的人需要做这个工作区映射，因为源（.ts）文件不能直接在运行时（dist）目录中获得。
似乎 Angular CLI 的基本配置使用了 Webpack，所有 TypeScript 文件都可以在其 src 目录中找到，因此可以在不使用调试器语句的情况下放置断点。
打开 chrome Devtools >设置（devtools 屏幕上的齿轮图标）>首选项 >select“启用 javascrpt 源映射”