VSCode使用Chrome调试Html,Js(支持跨域,访问本地Json)

本文介绍如何在VSCode中使用Debugger for Chrome插件调试HTML和JS文件,支持跨域及本地JSON访问。通过安装插件并配置launch.json,实现便捷的前端开发调试流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

VSCode使用Chrome调试Html,Js(支持跨域,访问本地Json)

安装Debugger For Chrome

需要先在VSCode扩展功能中搜索安装Debugger for chrome。在这里插入图片描述

配置launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请在这里插入代码片`访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [        
        {
            "name": "使用Chrome调试html",
            "type": "chrome",
            "request": "launch",
            "file": "${file}",  //调试当前打开的文档
            //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
            "runtimeExecutable": "D:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome_80.exe", // 改成您的 Chrome 安装路径
            // 需要跨域的话就打开以下注释。预先在源码目录创建文件夹UserDataDir
             "runtimeArgs": [
                 "--disable-web-security",
                 "--user-data-dir=${workspaceRoot}\\UserDataDir",
             ],
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",            
            "userDataDir": "${tmpdir}",
            "port": 5433
        }
    ]
}

开始调试

在调试窗口,选择“使用Chrome调试html”,打开需要调试的html文件,按F5即可调试。
在这里插入图片描述
————————————————————————————————————————————
参考:
http://blog.dreamlikes.cn/archives/993

<think>我们正在回答用户关于在VSCode中如何打开、编辑和运行HTML页面的问题。根据引用内容,我们可以总结出以下步骤:1.打开VSCode,创建或打开HTML文件。2.编辑HTML文件(可以使用内置的Emmet功能快速生成HTML结构)。3.运行HTML文件:有两种主要方式:a.以文件方式在浏览器中打开:安装DebuggerforChrome扩展,配置launch.json,然后运行调试。b.以Web站点方式运行:安装LiveServer扩展,然后通过LiveServer运行。由于LiveServer方式更简单且常用,我们将重点介绍。详细步骤:一、打开和编辑HTML文件-打开VSCode,点击“文件”->“打开文件夹”选择你的工作目录。-在资源管理器中,右键点击文件夹,选择“新建文件”,输入文件名(如index.html)。-在文件中输入`!`然后按Tab键,可以快速生成HTML5基本结构(需要Emmet支持VSCode已内置)。-编写HTML代码。二、运行HTML文件(使用LiveServer)1.安装LiveServer扩展:-点击左侧活动栏的扩展图标(或按Ctrl+Shift+X)。-搜索“LiveServer”,找到由RitwickDey开发的扩展,点击安装。2.安装完成后,在HTML文件的编辑区右键单击,选择“OpenwithLiveServer”(或者也可以点击编辑器右下角的“GoLive”按钮)。3.浏览器会自动打开该HTML页面,并且当你保存HTML文件时,浏览器页面会自动刷新。三、另一种方式:使用ViewinBrowser扩展(引用3中提到)1.安装ViewinBrowser扩展:-同样在扩展商店中搜索“ViewinBrowser”并安装。2.在资源管理器中右键点击HTML文件,选择“ViewinBrowser”。注意:ViewinBrowser扩展直接将HTML文件在浏览器中打开(文件协议),而LiveServer则是通过一个本地服务器(http协议)打开。使用本地服务器可以避免一些问题,特别是在使用AJAX时。因此,推荐使用LiveServer。四、通过调试配置运行(引用2中提到,适用于需要调试JavaScript的情况)1.安装DebuggerforChrome扩展。2.点击左侧的调试图标(或按Ctrl+Shift+D),然后点击“创建一个launch.json文件”。3.选择环境为“Chrome”。4.launch.json中配置:{"type":"chrome","request":"launch","name":"打开当前HTML文件","url":"${file}",//运行当前文件"webRoot":"${workspaceFolder}"}5.按F5启动调试,会在Chrome中打开当前HTML文件,并且可以调试JavaScript。总结:-简单预览:使用ViewinBrowser扩展(右键->ViewinBrowser)。-开发(尤其涉及JavaScript):推荐使用LiveServer(自动刷新)或DebuggerforChrome(可调试)。根据用户的问题,我们主要介绍LiveServer方式,因为它是最便捷且常用的。注意:在编写HTML时,VSCode提供了丰富的智能提示和代码补全。相关问题:1.如何在VSCode中快速生成HTML结构?2.LiveServer和ViewinBrowser扩展有什么区别?3.VSCode中如何调试HTML页面中的JavaScript?</think>### 在 VSCode 中操作 HTML 页面的完整指南 #### 一、打开 HTML 文件 1. **直接打开** - 打开 VSCode → 点击 `文件` → `打开文件` → 选择 HTML 文件 - 或直接拖拽 HTML 文件到 VSCode 窗口 2. **通过工作区打开** ```bash # 终端命令(需先安装 VSCode) code your_file.html ``` #### 二、编辑 HTML 文件 1. **高效编写技巧** - 输入 `!` + `Tab` 自动生成 HTML5 基础模板 - 使用 Emmet 缩写(例:输入 `div.container>ul.list>li*3` + `Tab` 自动生成嵌套结构) - 智能提示:输入标签名(如 `<div`)时自动显示属性建议 2. **常用快捷键** - 格式化代码:`Shift + Alt + F` - 复制行:`Shift + Alt + ↑/↓` - 多光标编辑:`Ctrl + Alt + ↑/↓`(Windows)/ `⌥ + ⌘ + ↑/↓`(Mac) #### 三、运行/预览 HTML 页面 ##### 方法 1:使用 Live Server(推荐🔥) 1. **安装扩展** - 打开扩展市场(`Ctrl+Shift+X`) - 搜索 "Live Server" → 安装 Ritwick Dey 开发的版本 2. **启动方式** - 右键点击 HTML 文件 → `Open with Live Server` - 或点击右下角 `Go Live` 图标 *效果:自动开启本地服务器(端口 5500),保存文件时浏览器实时刷新* ##### 方法 2:View in Browser 扩展 1. 安装 "View in Browser" 扩展 2. 右键 HTML 文件 → `View in Browser` ##### 方法 3:原生调试(适合复杂项目) ```json // .vscode/launch.json 配置示例 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "打开当前HTML", "url": "${file}", "webRoot": "${workspaceFolder}" } ] } ``` *按 F5 启动调试,适用于需要 JS 断点调试的场景[^2]* #### 四、工作流建议 1. **文件结构组织** ``` project/ ├── index.html ├── css/ │ └── style.css └── js/ └── script.js ``` 2. **必备扩展** - Auto Rename Tag:自动重命名配对的 HTML 标签 - HTML CSS Support:CSS 类名智能提示 - Prettier:代码自动格式化 #### 五、常见问题解决 - **中文乱码**:在 `<head>` 中添加 `<meta charset="UTF-8">` - **图片不显示**:检查路径是否正确(建议使用相对路径 `./images/logo.png`) - **扩展不生效**:按 `Ctrl+Shift+P` 执行 `Reload Window` > 提示:使用 Live Server 时,浏览器地址栏显示 `http://127.0.0.1:5500/...` 表示已通过本地 HTTP 服务器运行,比直接文件路径(`file:///`)更接近真实部署环境[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值