AI 助理
备案控制台
开发者社区 云计算 文章 正文

vscode中设置浏览器查看网页效果以及设置默认浏览器的方式

2022-04-28 2103
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 为了使vscode中的代码修改的时候网页可以同步更新,我们需要对一些功能进行设置,以及我们可以指定默认浏览器.在此我更倾向于Chrome.

首先在扩展菜单当中下载live server和open in browser两个扩展

image.png其次，选择live server右键选择扩展设置image.png

接下来修改settings.json中的内容

{
"code-runner.defaultLanguage": "javascript",
"workbench.colorTheme": "Ayu Mirage",
"files.autoSave": "afterDelay",
"liveServer.settings.donotShowInfoMsg": true,
"open-in-browser.default": "Google Chrome",
"emmet.excludeLanguages": [
"markdown"    ],
"editor.formatOnSave": true,
"editor.formatOnType": true,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "",
"liveServer.settings.ChromeDebuggingAttachment": false}

最后打开设置，搜索open-in-browser然后在默认浏览器设置的位置写上自己想要使用的浏览器即可

image.png

关键词：
浏览器vscode
浏览器网页
vscode浏览器
设置浏览器
浏览器设置
相信光的奥特王小懒
目录
相关文章
张飞的猪
|
1月前
|
Linux Go iOS开发
怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev
本文介绍了如何在 VSCode 中禁用点击 Go 包名时自动打开浏览器跳转到 pkg.go.dev 的功能。通过将 gopls 的 `ui.navigation.importShortcut` 设置为 "Definition"，可以实现仅跳转到定义处而不打开链接。具体操作步骤包括：打开设置、搜索 gopls、编辑 settings.json 文件并保存更改，最后重启 VSCode 使设置生效。
张飞的猪
61 7
怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev
john散漫
|
2月前
|
Web App开发 缓存 UED
如何设置浏览器的缓存策略？
【10月更文挑战第23天】通过合理地设置浏览器的缓存策略，可以在提高网页性能、减少网络流量的同时，确保用户能够获取到最新的内容，从而提升用户体验和网站的性能优化效果。
john散漫
173 4
龙大吉
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具，可以显著提升编码效率和代码质量。
龙大吉
664 4
bibilili
|
2月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
bibilili
167 1
热爱技术的小郑
|
5月前
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
这篇文章提供了在VScode中设置背景图的详细步骤，包括下载background插件、编辑setting.json文件、配置背景样式，并解决了设置后出现的不支持提示的问题。
热爱技术的小郑
797 1
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
路边两盏灯
|
5月前
|
存储
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
路边两盏灯
54 1
土木林森
|
5月前
|
Web App开发 JSON 安全
【跨域难题终结者】：一键解锁Chrome浏览器神秘设置，彻底告别开发阶段的跨域烦恼！
【8月更文挑战第20天】跨域是前端开发常遇难题，尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法，并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法，提供启动Chrome及使用`fetch`API示例，适合快速测试。但请注意这不适用于生产环境，存在一定安全风险。
土木林森
1354 1
热爱技术的小郑
|
5月前
|
搜索推荐 前端开发 程序员
如何在浏览器中搜索内容自动过滤CSDN的相关文章，一次设置永久过滤
这篇文章介绍了如何在浏览器中设置搜索时自动过滤掉CSDN的相关文章，提供了具体的浏览器设置步骤和推荐使用的搜索引擎。
热爱技术的小郑
102 0
如何在浏览器中搜索内容自动过滤CSDN的相关文章，一次设置永久过滤
热爱技术的小郑
|
5月前
Vscode设置标签页多行显示
这篇文章提供了在VSCode中设置标签页多行显示的方法，以提高编辑效率。
热爱技术的小郑
732 0
Vscode设置标签页多行显示
hylreg
|
5月前
|
编译器 C++
VS Code设置C++编译器路径
VS Code设置C++编译器路径
hylreg
76 0

热门文章

最新文章

  • 1
    Browser Use：开源 AI 浏览器助手，自动完成网页交互任务，支持多标签页管理、视觉识别和内容提取等功能
  • 2
    一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
  • 3
    折腾之王：JavaScript之父Brave浏览器与BAT的诞生
  • 4
    使用Web浏览器访问UE应用的最佳实践
  • 5
    浏览器插件上架指南：如何把你的产品搬上浏览器插件市场
  • 6
    Chrome浏览器实例的TypeScript自动化脚本
  • 7
    Marp 教程：如何在 VSCode 中引入自定义样式和主题
  • 8
    Marp 教程：使用 VSCode 编写专业 PPT
  • 9
    【HTML】——VSCode 基本使用入门和常见操作
  • 10
    vscode如何更改背景颜色主题，黑色或白色？
  • 1
    【完全免费】VS Code 最好用的 12 款 AI 代码提示插件！！！
    10987
  • 2
    【Linux】VScode远程连接Linux
    99
  • 3
    Vscode 内存过高的解决办法
    706
  • 4
    「Python入门」python环境搭建及VScode使用python运行方式
    136
  • 5
    vscode 生成项目目录结构 directory-tree 实用教程
    444
  • 6
    vscode中快捷生成自定义vue3模板
    409
  • 7
    vue3【2024版】开发环境搭建（含官网和nvm下载切换最新版node，修改node下载源，创建项目，启动项目，安装vscode插件Vue - Official）
    441
  • 8
    若依修改01-通义灵码 AI智能编码，从这里开始，搭建，设计，编码，部署，使用AI辅助设计，通义千问把AI辅助设计放到快捷链接当中，vscode可以嵌入通义灵码，必须解决idea+vscode+通义灵
    311
  • 9
    uni-app 使用vscode开发uni-app
    258
  • 10
    下载安装 vscode（含汉化、插件的推荐和安装）
    100

    • 相关电子书

    更多
  • WEB浏览器中即将发生的安全变化
  • 基于浏览器的实时构建探索之路
  • 基于浏览器的实时构建探索之路--玄寂

    • 相关实验场景

    更多
  • 前端开发基础2：VS Code和Edge的联动开发
  • 基于函数计算部署Serverless VSCode WebIDE
    • 下一篇
    阿里云开通OSS存储服务详细流程