使用 Angular CodeLive功能

CodeLive 可以简单查看哪些角度组件正在网页上加载，并快速从页面上的组件跳转到源代码。

1. 设置CodeLive

CodeLive 将浏览器连接到 IDE。您可以选择为每个Angular项目打开 CodeLive。

1.1 开关CodeLive

您可以选择为每个Angular项目打开 CodeLive。有两种不同的方法可以打开或关闭此功能。

从服务器视图工具栏

展开”服务器”视图中的”Angular CLI”，选择”Angular”项目，然后单击”启用 CodeLive”按钮。此按钮充当切换，打开或关闭 CodeLive。启用 CodeLive 时，该图标将突出显示。

从服务器查看上下文菜单

展开”服务器”视图中的Angular CLI，右键单击角项目并选择 CodeLive。此菜单选项充当切换，打开或关闭 CodeLive。启用 CodeLive 时，该图标将突出显示。

2. 查看源代码

在浏览器中查看页面时，您可以选择查看浏览器中加载的源文件，打开 IDE 中的任何文件，或从页面上的元素直接跳转到源文件。

2.1 阅览活跃组件和开源文件

1. 在浏览器中查看网页。
2. 点击CodeLive图标  打开CodeLive Dashboard. Dashboard 列出了活动的Angular组件. 每个文件与组件关联的组件旁边会显示一个图标: TypeScript , HTML template  or CSS .
   
   CodeLive Dashboard
3.  单击要打开的文件的图标。该文件将在编辑器中打开。

2.2 从组件跳转至开源文件

1. 在浏览器中查看网页。
2. 单击魔杖图标。
3. 将鼠标悬停在页面上的组件上以查看组件名称。
4. 单击该组件以查看为所选组件筛选的仪表板列表。
5. 将鼠标悬停在组件上，每个文件的名称旁边会显示一个图标：TypeScript、HTML模板或 CSS 。
6. 单击要打开的文件的图标。该文件将在编辑器中打开。

3. 兼容性

已通过以下环境测试。

	Chrome	Firefox	Internet Explorer	Edge	Safari	Internal Browser
Win 7 64	X	X				X
Windows 8.1 64	X	X				X
Windows 10 64	X	X	X	X		X
Linux Mint 16/17	X	X
OSX 10.13.6	X				X
Linux Fedora 23 x64		X				X