前端开发基础2：VS Code和Edge的联动开发
1. 创建资源
开始实验之前，您需要先创建实验相关资源。
- 在实验室页面，单击创建资源。
- （可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、子用户信息等）。
说明：资源创建过程需要3～5分钟（视资源不同开通时间有所差异，ACK等资源开通时间较长）。完成实验资源的创建后，您可以在云产品资源列表查看已创建的资源信息，例如：子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。
实验环境一旦开始创建则进入计时阶段，建议学员先基本了解实验具体的步骤、目的，真正开始做实验时再进行创建。
资源创建成功，可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息
2. 进入VNC实验环境
- 进入网页环境。
在远程桌面页面中，双击Chromium网页浏览器。
- 登录RAM用户。
2.1 浏览器启动后会默认打开阿里云的RAM用户登录页面，在RAM用户登录框中单击下一步。
2.2 复制粘贴页面左上角的子用户密码到用户密码输入框，单击登录。
- 进入ECS的远程连接。
3.1 登录成功后跳转到控制台，我们在控制台的搜索框中输入ECS，然后单击云服务器ECS进入云服务器控制台。
3.2 在ECS控制台中，我们找到实验创建的ECS，点击右侧的远程连接按钮。
- 在远程连接中选择通过VNC远程连接中的立即登录，如果没有显示该选项，则可单击展开其他登录方式。
- 登录VNC远程连接。
4.1 初次登录VNC远程连接时需要先设置VNC密码。单击重置VNC密码。
4.2 输入两次新的VNC密码，并单击确定。
4.3 VNC密码设置成功后，输入密码并单击确定。
4.4 VNC登录成功后会看到实验ECS的登录界面。
说明：dev账户的登录密码为 Dev12345。
3. Edge Tools插件的安装和配置
在上一个实验中，我们为大家介绍了vscode和edge的基本用法。但是最基本的开发架构下，开发的过程中开发人员需要在vscode和edge两个软件之间反复切换，从而大大影响了开发效率，因此本次实验我们将为大家解释两款常用的Web开发插件Edge Tools和Live Server。接下来我们将为大家介绍Edge Tools插件，通过这个插件我们可以实现vscode和edge的联动开发。
- Edge Tools插件的安装
在扩展管理上部输入框中输入 Edge Tools，选择 Microsoft Edge Tools for VS Code。单击安装。
基本插件安装之后的效果如下，在功能导航栏出现了Edge Tools插件的功能选项。
2. Edge Tools插件的基本用法
2.1 我们打开Demo项目的文件夹，选择菜单 文件-> 打开文件夹...->选择 /home/dev/web，单击 打开 。
2.2 在资源管理器选项卡中选择index.html并点击右键，选择Open with Edge->Open Browser with DevTools菜单项。
我们发现Edge浏览器集成到了vscode编辑器中。通过这种方式开发人员即可避免频繁的切换不同的应用。
2.3 接下来我们点击vscode代码编辑器中的22行的左侧，在代码编辑器设置断点，然后点击网页中的button按钮。
这时我们会发现调试功能已经在vscode编译器中生效。
2.4 当我们在vscode编译器中进行调试时，可以通过上方的调试工具条发送调试指令。我们点击继续按钮即可让程序继续运行，点击停止按钮即可退出调试模式回到文本编辑状态。
3. 通过Edge Tools创建调试配置文件。
3.1 通过上面的方法我们可以设置针对单个网页文件的运行和调试。对于大型项目来说网页文件往往很多，选择单文件调试往往比较麻烦。这时我们可以将Edge Tools工具配置成为vscode的默认调试方法。通过统一的调试入口启动edge运行调试网页。首先我们选择Edge Tools选项卡，单击Generate launch.json按钮，
3.2 在选择资源管理器选项卡，我们会发现在.vscode目录中，生成了launch.json配置文件。
3.3 接下来我们对launch.json文件进行配置，在"configurations":字段中找到三个"url":配置项。
3.4 将三个"url":配置项修改为如下内容。
"url": "file:///home/dev/web/index.html",
3.5 配置文件修改好之后，我们选择vscdoe的运行和调试选项卡，在选项卡的头部，可以看到调试模式下拉框，在下拉框中有两个调试选项。我们选择Launch Edge Headless and attach DevTools选项，然后点击下拉框左侧的开始调试按钮。
3.6 同样可以进入vscode的调试模式，完成调试工作。在此我们先退出调试模式。单击顶部的停止按钮。
3.7 接下来我们在选择Launch Edge and attach DevTools选项，再次单击开始调试按钮。
此时我们看到在这种模式下，Edge以单独浏览器的形式进行了启动。但是开发人员所有的调试工作还是在vscode中进行。
4. Edge和VS Code之间的联动用法
上一个小节我们为大家展示了通过Edge Tools将Edge的调试功能绑定到vscode中。实际上除了将edge绑定到vscode，我们还可以将edge中的文本修改同步到vscode中。本小节我们将为大家介绍这一功能。
- VS Code到Edge的文本实时更新
1.1 在运行和调试选项卡中选择headless模式，并点击开始调试按钮。
1.2 选择资源管理器选项卡，并选择index.html文件，将文件中的Hello World修改为Hello World 001，修改完成后点击重启按钮。
可以发现页面已经更新。
- Edge在Headless模式下的文本更新。
2.1 接下来我们来学习如何从Edge编辑器直接更新css的属性值，首先我们在内嵌Edge的DevTools中选择元素选项卡，然后选择<body>元素，在下方的样式选项卡可以看到<body>对应的样式选项卡。在样式中，我们可以看到在style.css文件中定义的属性值background-color。
‘
2.2 我们单击background-color属性值中的颜色块，即可进入颜色编辑器。在颜色编辑器中。我们可以通过拖动的方式修改<body>的背景颜色。
2.3 当颜色修改之后，我们选择sytle.css文件，我们可以看到颜色属性已经自动修改了。我们按Ctrl+S快捷键保存文件即可
- Edge在独立模式下的文本更新。
3.1 上一小节中我们介绍了Headless模式下的属性文本自动更新。而对于独立应用模式下，实现文本的自动更新需要进行相关的配置，这一小节我们来学习如何进行配置。首先我们在运行和调试选项卡中选择普通模式，并点击开始调试按钮。
3.2 在单独打开的edge浏览器中，选择菜单项设置及其他->更多工具->开发人员工具 。
3.3 选择源代码选项卡->文件系统选项卡->将文件夹添加到工作区。
3.4 选择/home/dev/web目录，单击选择。
3.5 在选择目录之后，还需要再浏览器上方对DevTools工具授权，单击允许。
3.6 授权之后，即可看到源代码目录被添加到了工作区，这时候我们选择index.html文件，将Hello World修改为Hello World 002，并按下Ctrl + S保存。
‘
3.7 切换到vscode编译器，选择index.html文件，会发现文件内容已经和edge中的修改同步。
由此可见不论是headless嵌入式edge还是独立运行的edge中，当我们修改样式或者代码时，vscode都会自动加载，但是在vscode中修改样式则需要edge从新加载。
5. Live Server的安装和使用
上一个小节我们介绍了通过EdgeTools和DevTools实现vscode和edge的联动调试，但是通过这种方法打开的网页，使用的是本地文件协议而不是http协议。这两种协议在开发动态加载网页时的逻辑还是会有很大的差异。本小节我们为大家演示两者的差异，以及如何通过Live Server插件实现通过web协议调试本地网页。
- 本地文件系统开发动态加载网页时的问题。
1.1 我们打开并修改index.html，修改onClick()函数，将功能调整为动态加载sytle.css。文件为如下内容。
<!DOCTYPE html> <html lang="zh-CN"> <link href="style.css" rel="stylesheet" type="text/css" /> <title>Web dev</title> <body> <div> Hello World </div> <div> <button onclick="onClick()">button</button> </div> <div id="text"> </div> <script type="text/javascript"> var count = 0 function onClick() { var xhr = new XMLHttpRequest(); xhr.open("get", "style.css") xhr.onreadystatechange = function(){ if( xhr.readyState == xhr.DONE && xhr.status == 200 ){ document.getElementById("text").textContent = (count++ + " " + xhr.responseText); } } xhr.send() } </script> </body> </html>
1.2 在运行和调试选项卡选择Headless模式进行调试。在web页面上点击button按钮。我们会发现由于CORS安全策略，动态加载功能无法实现。因此我们需要新的方法进行本地调试。
- Live Server 插件得安装和使用。
2.1 我们进入扩展选项卡，并搜索Live Server ，单击安装。
2.2 安装完毕后，我们进入资源管理器选项卡，在index.html上点击右键，选择Open with Live Server菜单。
2.3 我们会发现Edge浏览器以独立运行得方式打开，同时浏览器得URL显示为127.0.0.0.1:5500/index.html 说明此时得网页已经通过Edge默认得http协议进行加载
2.4 接下来我们单击button，我们发现style.css文件得内容已经可以动态得读取和加载，并且显示到网页上。
- 编写Live Server 得调试配置文件。
3.1 Live Server不但可以单文件调试，同样可以作为vscode系统调试功能。我们进入资源管理器选项卡，打开launch.json文件。并修改三处"url":所在行为如下内容。
"url": "http://127.0.0.1:5500/index.html",
3.2 修改完毕后，进入运行和调试选项卡，选择Headless方式进行调试，我们发现嵌入式的Edge浏览器中的URL变为http://127.0.0.1:5500/index.html。接下来我们单击页面中的button，发现动态加载功能已经生效。
6. Live Server的注意事项
在上一个小节中我们我们学习了Live Server的基本用法，本小节中，我们继续介绍Live Server的其他功能和注意事项。
- Live Server的服务开关。
1.1 在Live Server插件安装成功后，我们观察右下角的状态条。可以看到 Port:5500，此位置为Live Server 的状态显示区，此信息表示Live Server服务器已经启动，同时运行在5500端口。
1.2 接下来我们点击此区域，会发现状态条变为Go Live，此状态表示Live Server处于关闭状态。
1.3 这时我们启动Headless模式调试，会发现由于服务关闭，网页无法显示。如果在实际开发中遇到此情况，需要单击Go Live状态显示区启动Live Server。
- Live Server的动态加载功能。
2.1 我们在Headless调试模式下，修改index.html文件中的Hello World字段为Hello World 003并按下Ctrl + S快捷键保存。我们发现网页已经自动更新。
2.2 为了了解自动更新功能的实现原理，我们在Edge DevTools页面中选择元素选项卡。我们发下相比较index.html文件。加载到页面的元素中的<body>元素的最后多了如下内容。
2.3 我们点击其中的<script>元素，发现Live Server自动添加了若干JavaScript脚本。通过这些脚本。当vscode中的文件被修改后，会自动更新到edge浏览器中。
- Live Server调试Html的注意事项。
3.1 在上一段中我们了解到Live Server会在<body>元素的最后加入JavaScript。接下来我们尝试在<body>元素的后面加入JavaScript，我们插入如下代码。按下Ctrl + S快捷键保存。
<script type="text/javascript"> console.log("after body"); </script>
3.2 观察Edge DevTools页面的元素选项卡。会发现LiveServer注入的JavaScript脚本在"atfer body"之前。
3.3 我们再尝试在after body中加入断点，点击index.html文件的34行添加断点。并重新启动调试。观察断点的运行状态。发现断点停在35行，但是调试控制台中并没有输出"after body"，这是因为Live Server注入的JaveScript改变了Edge中的网页和源代码的对应关系。导致断点位置错误。因此在使用Live Server的情况下，要注意所有的JaveScript不要写在<body>元素的后面。
实验链接：https://developer.aliyun.com/adc/scenario/a4fc6e0c726741e7acb28f5bd3e641e4
