大家好！
前面我们了解了前端工程师的开发工具--vscode，现在我们再了解另一个工具--Chrome浏览器。
Chrome浏览器
Chrome浏览器又叫谷歌浏览器，是美国谷歌公司开发的一款浏览器，也是目前世界上市场占有率最高的浏览器。
Chrome浏览器非常适合开发者工作使用，所以我们把Chrome浏览器设置为电脑的默认浏览器。只有这样，我们才能在打开网页文件，查看网页效果时默认用Chrome浏览器打开网页。
但是我们电脑上的电脑管家等杀*软件和安全软件，会阻止这个操作。
如何设置Chrome浏览器为你的电脑默认浏览器呢？过程如下：
打开Chrome浏览器(如果你的电脑没有安装Chrome浏览器，请自己在搜索引擎进行搜索Chrome关键字，下载Chrome浏览器)，再点击地址输入框最右边的三个点，然后再点击“设置”，如下图：
然后在打开的“设置”界面，找到“默认浏览器”。如果你的默认浏览器不是Chrome浏览器，就会出现“Chrome浏览器不是默认浏览器”、“将Chrome浏览器设为默认浏览器”两行字，点击“将Chrome浏览器设为默认浏览器”，按照步骤把Chrome浏览器设为默认浏览器。
由于我自己电脑上安装了安全卫士软件，这个软件会把默认浏览器设为浏览器，当我点击“将Chrome浏览器设为默认浏览器”时，会打开系统的设置界面，如下图：
然后我点击web浏览器里面的选项，会弹出我电脑上安装的浏览器，我选择Chrome浏览器，如下图：
选择之后，web浏览器这一项，就变成了Chrome，如下图：
这就把Chrome设置为默认浏览器了。
因为我的Chrome浏览器安装的比较早，不是最新版本的，还有就是我的电脑上安装了安全卫士，如果你现在安装最新版本的Chrome浏览器，可能设置默认浏览器的时候，你出来的界面可能会跟我的不太一样，设置的过程可能跟我不太一样，这个不用在意，其实设置过程很简单，应该是大同小异。
设置好默认浏览器之后，我们创建的网页文件的图标就随之变了，变成了Chrome的图标，如下图：
当我们双击“first.html”的时候，就会打开Chrome浏览器，并且在Chrome浏览器中打开这个网页，但是因为我们之前在first.html中什么都没写，所以网页上什么都没有，是个白颜色的界面。如下图：
现在我们在vscode中编辑一下first.html这个网页文件，比如我们在body中间打一些字：“这是我编写的第一个网页！”，然后按ctrl+s保存一下，如下图：
然后我们在Chrome中刷新刚才的网页（点Chrome浏览器地址栏左边的刷新按钮，或者按F5键进行刷新），网页上就会出现“这是我的第一个网页！”这一行字，如下图：
所以前端开发的时候，是这样的一个过程：我们在编辑器中编写好网页的代码，然后保存，然后在浏览器中刷新一下，查看网页的具体效果。记得保存和刷新的操作哦，否则浏览器中效果你看不见。
以上就是设置默认浏览器以及预览网页的第一种方法：即直接双击我们创建的网页文件，即可打开并查看网页。
还有第二种预览网页的方法：在vscode上安装LiveServer插件，这个插件可以“实时热更新”网页，即自动刷新网页。
也就是说，一旦当你的网页被保存，在浏览器窗口打开的网页，会自动刷新。
那么我们先安装一下LiveServer这个插件，点击vscode的扩展插件的按钮，在输入框中输入“LiveServer”，然后点击install，就会帮我们自动完成安装这个插件。
安装好之后，我们回到自己写的网页中，比如first.html中，此时按下快捷键ctrl+shitf+p键，此时就会呼唤出一个命令窗口，在这个窗口的输入框中，输入命令“live”，就会在下面智能感应出一些选项，我们点击其中的“openwithliveserver”，当我们点击之后，我们的网页就会跑到一个小型的服务器上。这个服务器的网址是：.0.0.1:，这是一个本地服务器。如下图：
现在我们知道这个网址代表本地服务器就行，先不管他，后面我们再了解本地服务器。
现在我们把vscode的编程窗口拖到电脑屏幕的左边，把浏览器窗口拖到电脑屏幕的右边。如下图：
此时，我在first.html这个网页内容中，在“这是我的第一个网页！”后面再输入一句话：“不忘初心”，然后ctrl+s保存，就会发现浏览器中瞬间就随之出现了“不忘初心”这几个字，无需刷新浏览器。如下图：
你一定要按照我的步骤自己动手过一遍哦。切记一定要动手。
也就是说，只要你左边的编辑器代码一保存，右边的浏览器窗口中的网页就自动更新了。是不是很方便呢？
这就叫热更新。我们安装LiveServer这个插件的目的，就是要让网页具备热更新的功能。这样以后我们开发网页的时候，就会非常方便。
注意：使用第二种方法时，网页必须已经存放在了文件夹中，并且vscode中已经打开了保存网页文件的这个文件夹。否则你按ctrl+shift+p快捷键时，会不起作用且会报错。
什么意思呢？也就是说，你创建的网页文件一定要放在一个文件夹中，并且你的vscode中一定要打开这个文件夹，否则你按ctrl+shift+p是不起作用的，唤醒不了热更新的命令窗口的。
还记得vscode的侧边栏吗？忘记的去看我文章。也就是说，如果你vscode的侧边栏是这样：
就表明你没有在vscode中打开你的网页文件夹，这时你想热更新是不行的。
此时你可以点击“打开文件夹”这个蓝色按钮，打开你的网页文件夹。当你的vscode中打开你的网页文件夹时，侧边栏是酱紫的：
此时，你就可以使用ctrl+shift+p唤醒热更新功能啦。
我再总结一下，预览网页的两种方法：
1直接双击我们创建的网页文件，即可打开并查看网页
2给vscode安装LiveServer插件，在vscode的html文件中，按ctrl+shift+p键，点击openwithliveserver，就会启动热更新服务，当我们在编辑器保存代码时，我们就会看到浏览器网页会实时自动更新。
两种方法的区别是：第一种方法需要手动刷新，第二种方法会自动刷新。第二种方法会很大的提高开发效率。
