现在,使用liveServer.settings.AdvanceCustomBrowserCmdLine设置(请参阅下文)。 liveServer.settings.NoBrowser:如果为真,则实时服务器将在没有打开浏览器的情况下启动。 如果是默认值 false liveServer.settings.https:启用https协议。 默认: 100 liveServer.settings.mount: :将目录安装到路由。 默认: false liveServer.settings.file::入口点文件的路径。
editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.defaultFormatter": "esbenp.prettier-vscode", "liveServer.settings.donotShowInfoMsg www.baidu.com", // The default start url for new Browser Preview instances "browser-preview.verbose": false, "liveServer.settings.ChromeDebuggingAttachment workbench.editor.enablePreview": false, "explorer.compactFolders": false, "workbench.list.openMode": "doubleClick", "liveServer.settings.CustomBrowser editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.defaultFormatter": "esbenp.prettier-vscode", "liveServer.settings.donotShowInfoMsg workbench.editor.enablePreview": false, "explorer.compactFolders": false, "workbench.list.openMode": "doubleClick", "liveServer.settings.CustomBrowser
天下如下代码即可: { "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "liveServer.settings.donotShowInfoMsg ": true, "liveServer.settings.ChromeDebuggingAttachment": false, "editor.suggest.snippetsPreventQuickSuggestions
Live Server 我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果 使用 右击>Open with Live Server 配置 { "liveServer.settings.port ": 8080, //设置本地服务的端口号 "liveServer.settings.root": "/", //设置根目录,也就是打开的文件会在该目录下找 "liveServer.settings.CustomBrowser ": "chrome", //设置默认打开的浏览器 "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port =9222", "liveServer.settings.NoBrowser": false, "liveServer.settings.ignoredFiles": [//设置忽略的文件 ".
在做前端开发的过程中,我们不免要使用到liveServer这样的功能,很常见的,在我们开发Vue或者React应用的过程中,我们一般会启动一个devServer,然后,开发的时候,改动js等文件,所打开的网页就刷新了 这里为了简单起见,我们看一个简单版的liveServer,源码在此。 我们可以看到: // Setup file watcher LiveServer.watcher = chokidar.watch(watchPaths, { ignored: ignored, function handleChange(changePath) { var cssChange = path.extname(changePath) === ".css"; if (LiveServer.logLevel 'refreshcss' : 'reload'); }); } //return server; LiveServer.watcher .on("change", handleChange
editor.fontSize": 16, //是否在每行末尾添加分号 "prettier.semi": false, "prettier.printWidth": 200, // 超过最大值换行 "liveServer.settings.donotShowInfoMsg
> F12打开浏览器的Devtools,然后点击设置并开启实验室特性; vscode 建议提前安装好LiveServer
重装的时候换位置了或者擅自把Chrome的路径从C盘移到别的盘了,首先找到你的Chrome浏览器(桌面的快捷方式就行),右键点击属性找到,属性里的目标,ctrl+c 复制地址 打开vscode,找到设置 加入一行配置: "liveServer.settings.AdvanceCustomBrowserCmdLine
itemName=techer.open-in-browser Live Server ID: ritwickdey.liveserver 说明:实时预览静态文件的简易服务器 VS Marketplace itemName=ritwickdey.LiveServer 其他 Image preview ID: kisstkondoros.vscode-gutter-preview 说明:增强 vscode
/src/utils/file') const liveServer = require("live-server"); const app = express(); // 自定义跨域中间件 const config.api.port, () => { console.log(`接口已启动,访问地址为:http://${config.api.url}`) }) /** * API 服务 */ liveServer.start
"scripts": { "start": "npm-run-all --parallel liveserver watch", "liveserver": "live-server "scripts": { "start": "npm-run-all --parallel liveserver watch", "liveserver": "live-server
"scripts": { "start": "npm-run-all --parallel liveserver watch", "liveserver": "live-server", "scripts": { "start": "npm-run-all --parallel liveserver watch", "liveserver": "live-server",
京东页面所用的css、js包括一些图片都是异步加载的,其中涉及到的css和js我自己下载好了,京东logo和购物车图标的显示也是http请求获取到的,不是本地图标,这里我没改是因为我用的VSCode,装了插件LiveServer
我们来看一下运行后的结果是怎么样的,我运行浏览器的插件是这个LiveServer 个人觉得还是很不错的这个插件,右键,就可以直接在浏览器中显示这个 web 项目了运行后的网页页面,我觉得这个效果不用多说了吧
5050-5051:5050 : code-server live server # 8765:8765 :https web port # 31004:22 :ssh # 31000-31003 :liveserver
PKief.material-icon-theme code --install-extension redhat.java code --install-extension ritwickdey.LiveServer
条实测有效的优化策略✅1.精简扩展:只留刚需Ctrl+Shift+X→Developer:ShowRunningExtensions查看CPU/Memory占用Top5的扩展强烈建议移除(除非必需):LiveServer
"throttleTime": 60000, "functionParamAddStr": "", "NoMatchParams": "no show param" }, "liveServer.settings.donotShowInfoMsg
二、实战准备:环境与技术栈本次实战无需复杂框架,原生HTML+JavaScript即可实现,具体准备如下:开发工具:VSCode(推荐安装LiveServer插件,用于本地HTTPS调试);测试环境:Chrome110 stopBtn.addEventListener('click',stopListening);四、测试与调试:避坑指南1.本地调试方案由于浏览器要求HTTPS环境,本地测试可通过以下两种方式:方案1:使用LiveServer
itemName=ritwickdey.LiveServer Auto Close Tag 和 Auto Rename Tag ?