1. 使用浏览器查看VSCode写的代码
在Web开发中，我们经常需要使用文本编辑器编写代码，如常用的VSCode等。但在编写完代码后，需要查看效果，此时我们可以通过使用浏览器来进行预览。
1.1 打开VSCode Live Server插件
VSCode中提供了许多插件来辅助我们进行开发，在查看代码效果方面，可以使用Live Server插件来进行预览。在VSCode中按下Ctrl+Shift+X，在搜索框中输入Live Server，点击安装该插件。
安装插件示例：
Ctrl+Shift+X -> 搜索Live Server -> 点击安装
1.2 运行Live Server
安装后，我们需要运行Live Server来进行预览。在VSCode中打开需要预览的HTML文件，在该文件中右键单击，选择Open with Live Server，此时该HTML文件会在默认浏览器中打开，并且可以实时预览效果。
运行Live Server示例：
打开需要预览的HTML文件 -> 右键单击 -> 选择Open with Live Server
1.3 其他方式查看代码
除了使用Live Server插件进行预览，我们还可以直接在浏览器中打开HTML文件来进行查看。在VSCode中打开需要预览的HTML文件，点击文件路径上的文件名，此时会弹出一个选项框，选择Copy Path，然后将该路径粘贴到浏览器地址栏中即可。
在浏览器中查看HTML文件示例：
打开需要预览的HTML文件 -> 点击文件路径上的文件名 -> 选择Copy Path -> 粘贴到浏览器地址栏中
2. 查看效果时需要注意的问题
在进行代码预览时，有一些问题需要注意。
2.1 缓存问题
在浏览器中查看代码效果时，可能会出现缓存问题，即浏览器读取了旧版本的代码而非最新的代码。此时，我们需要清除浏览器缓存，再刷新页面。
清除浏览器缓存示例：
在浏览器中，按下Ctrl+Shift+Del，选择清除缓存选项
2.2 路径问题
在进行预览时，需要注意静态资源的路径问题。如HTML文件中引用了CSS、JavaScript等文件，需要确保路径的正确性，否则浏览器将无法读取到该文件。
路径问题示例：
<link rel="stylesheet" href="css/styles.css">
需要确保文件路径css/styles.css正确，否则无法读取到该CSS文件。
3. 总结
以上就是使用浏览器查看VSCode写的代码的相关方法和注意事项，希望能对大家有所帮助。