lodopa5预览时默认横向_预览网页以及热更新网页

大家好！

前面我们了解了前端工程师的开发工具--vscode，现在我们再了解另一个工具--Chrome浏览器。

Chrome浏览器

Chrome浏览器又叫谷歌浏览器，是美国谷歌公司开发的一款浏览器，也是目前世界上市场占有率最高的浏览器。

Chrome浏览器非常适合开发者工作使用，所以我们把Chrome浏览器设置为电脑的默认浏览器。只有这样，我们才能在打开网页文件，查看网页效果时默认用Chrome浏览器打开网页。

但是我们电脑上的电脑管家等杀毒软件和安全软件，会阻止这个操作。

如何设置Chrome浏览器为你的电脑默认浏览器呢？过程如下：

打开Chrome浏览器(如果你的电脑没有安装Chrome浏览器，请自己在搜索引擎进行搜索Chrome关键字，下载Chrome浏览器)，再点击地址输入框最右边的三个点，然后再点击“设置”，如下图：

然后在打开的“设置”界面，找到“默认浏览器”。如果你的默认浏览器不是Chrome浏览器，就会出现“Chrome浏览器不是默认浏览器”、“将Chrome浏览器设为默认浏览器”两行字，点击“将Chrome浏览器设为默认浏览器”，按照步骤把Chrome浏览器设为默认浏览器。

由于我自己电脑上安装了360安全卫士软件，这个软件会把默认浏览器设为360浏览器，当我点击“将Chrome浏览器设为默认浏览器”时，会打开系统的设置界面，如下图：

然后我点击web浏览器里面的选项，会弹出我电脑上安装的浏览器，我选择Chrome浏览器，如下图：

选择之后，web浏览器这一项，就变成了Chrome，如下图：

这就把Chrome设置为默认浏览器了。

因为我的Chrome浏览器安装的比较早，不是最新版本的，还有就是我的电脑上安装了360安全卫士，如果你现在安装最新版本的Chrome浏览器，可能设置默认浏览器的时候，你出来的界面可能会跟我的不太一样，设置的过程可能跟我不太一样，这个不用在意，其实设置过程很简单，应该是大同小异。

设置好默认浏览器之后，我们创建的网页文件的图标就随之变了，变成了Chrome的图标，如下图：

当我们双击“first.html”的时候，就会打开Chrome浏览器，并且在Chrome浏览器中打开这个网页，但是因为我们之前在first.html中什么都没写，所以网页上什么都没有，是个白颜色的界面。如下图：

现在我们在vscode中编辑一下first.html这个网页文件，比如我们在中间打一些字：“这是我编写的第一个网页！”，然后按ctrl+s保存一下，如下图：

然后我们在Chrome中刷新刚才的网页(点Chrome浏览器地址栏左边的刷新按钮，或者按F5键进行刷新)，网页上就会出现“这是我的第一个网页！”这一行字，如下图：

所以前端开发的时候，是这样的一个过程：我们在编辑器中编写好网页的代码，然后保存，然后在浏览器中刷新一下，查看网页的具体效果。记得保存和刷新的操作哦，否则浏览器中效果你看不见。

以上就是设置默认浏览器以及预览网页的第一种方法：即直接双击我们创建的网页文件，即可打开并查看网页。

还有第二种预览网页的方法：在vscode上安装Live Server插件，这个插件可以“实时热更新”网页，即自动刷新网页。

也就是说，一旦当你的网页被保存，在浏览器窗口打开的网页，会自动刷新。

那么我们先安装一下Live Server这个插件，点击vscode的扩展插件的按钮，在输入框中输入“Live Server”，然后点击install，就会帮我们自动完成安装这个插件。

安装好之后，我们回到自己写的网页中，比如first.html中，此时按下快捷键ctrl+shitf+p键，此时就会呼唤出一个命令窗口，在这个窗口的输入框中，输入命令“live”，就会在下面智能感应出一些选项，我们点击其中的“open with live server”，当我们点击之后，我们的网页就会跑到一个小型的服务器上。这个服务器的网址是：127.0.0.1:5500，这是一个本地服务器。如下图：

现在我们知道这个网址代表本地服务器就行，先不管他，后面我们再了解本地服务器。

现在我们把vscode的编程窗口拖到电脑屏幕的左边，把浏览器窗口拖到电脑屏幕的右边。如下图：

此时，我在first.html这个网页内容中，在“这是我的第一个网页！”后面再输入一句话：“不忘初心”，然后ctrl+s保存，就会发现浏览器中瞬间就随之出现了“不忘初心”这几个字，无需刷新浏览器。如下图：

你一定要按照我的步骤自己动手过一遍哦。切记一定要动手。

也就是说，只要你左边的编辑器代码一保存，右边的浏览器窗口中的网页就自动更新了。是不是很方便呢？

这就叫热更新。我们安装Live Server这个插件的目的，就是要让网页具备热更新的功能。这样以后我们开发网页的时候，就会非常方便。

注意：使用第二种方法时，网页必须已经存放在了文件夹中，并且vscode中已经打开了保存网页文件的这个文件夹。否则你按ctrl+shift+p快捷键时，会不起作用且会报错。

什么意思呢？也就是说，你创建的网页文件一定要放在一个文件夹中，并且你的vscode中一定要打开这个文件夹，否则你按ctrl+shift+p是不起作用的，唤醒不了热更新的命令窗口的。

还记得vscode的侧边栏吗？忘记的去看我上一篇文章。也就是说，如果你vscode的侧边栏是这样：

就表明你没有在vscode中打开你的网页文件夹，这时你想热更新是不行的。

此时你可以点击“打开文件夹”这个蓝色按钮，打开你的网页文件夹。当你的vscode中打开你的网页文件夹时，侧边栏是酱紫的：

此时，你就可以使用ctrl+shift+p唤醒热更新功能啦。

我再总结一下，预览网页的两种方法：

1  直接双击我们创建的网页文件，即可打开并查看网页

2  给vscode安装Live Server插件，在vscode的html文件中，按ctrl+shift+p键，点击open with live server，就会启动热更新服务，当我们在编辑器保存代码时，我们就会看到浏览器网页会实时自动更新。

两种方法的区别是：第一种方法需要手动刷新，第二种方法会自动刷新。第二种方法会很大的提高开发效率。

感谢阅读！知识总结不易，请点个赞和在看鼓励一下呗！分享朋友圈是最好的啦！

关注我，一起成为基础扎实的全栈工程师