大家好!
前面我们了解了前端工程师的开发工具--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,就会启动热更新服务,当我们在编辑器保存代码时,我们就会看到浏览器网页会实时自动更新。
两种方法的区别是:第一种方法需要手动刷新,第二种方法会自动刷新。第二种方法会很大的提高开发效率。
感谢阅读!知识总结不易,请点个赞和在看鼓励一下呗!分享朋友圈是最好的啦!
关注我,一起成为基础扎实的全栈工程师