vscode断点调试js项目

vscode断点调试js项目

vscode 上装一个插件:debugger for chrome 

e31f8109cf2461a60788048825e8fc2.png

用VSCode装载项目

9a631ed5203e6738b07fb9cb748f565.png

按F5,出现搜索框,选择 Chrome

0a0e847149ce77af5d5768518214218.png

然后出现个配置的提示,并打开了launch.json这个文件

6b8f2a0e442b0eb44b93894e3eac106.png

在这个文件里添加一段配置信息

{            "name": "使用本机 Chrome 调试",            "type": "chrome",            "request": "launch",             "file": "${workspaceRoot}/index.html",        //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html            "runtimeExecutable": "C:Program Files (x86)GoogleChromeApplicationchrome.exe", // 改成您的 Chrome 安装路径            "sourceMaps": true,            "webRoot": "${workspaceRoot}",        //  "preLaunchTask":"build",            "userDataDir":"${tmpdir}",            "port":5433        }

然后,更改调试方式 
bf10d8af41a7a606a1786453253a0a4.png

如图,选择左边的圆形按钮,然后出来这个调试配置管理界面,选择“使用本机 Chrome 调试”。

然后在项目的 js 处设置好断点,按 F5,就可以进行断点调试了。

806a4983dad176bc9a32843fdaced5a.png

相关文章教程推荐:vscode教程

以上就是vscode断点调试js项目的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/68957.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月12日 20:59:11
下一篇 2025年11月12日 21:24:39

相关推荐

  • 如何在Mac上使用VS Code开发PHP PHP环境编辑器关联教程

    推荐使用homebrew安装和管理php,因其提供更新的版本、更灵活的版本切换、更简便的扩展安装以及更好的权限控制。1. 使用homebrew安装php:通过命令brew install php安装最新稳定版或指定版本;2. 配置环境路径:确保系统优先使用homebrew安装的php;3. 安装必要…

    2025年12月10日 好文分享
    000
  • 代码质量怎么检测提升?静态分析工具使用教程

    代码质量可通过静态分析工具提升。静态分析工具无需运行程序即可扫描源代码,识别潜在错误、规范问题和安全漏洞。常见工具包括eslint(javascript)、pylint/flake8(python)、sonarqube(多语言支持)。选择工具时应考虑语言支持、社区活跃度、集成能力、规则可配置性。安装…

    2025年12月10日 好文分享
    000
  • 处理PhpStorm快捷键无法使用的故障

    phpstorm快捷键失效常见原因包括键盘映射更改、系统或插件冲突、配置异常等,解决方法如下:1. 检查并恢复keymap设置至默认或习惯方案,排除插件影响;2. 关闭可能冲突的系统或第三方软件,测试输入法切换是否干扰;3. 清除phpstorm缓存或重置配置,路径依操作系统而异;4. 更新phps…

    2025年12月10日 好文分享
    000
  • Windows 11下PHP和前端开发:WSL2宝塔面板还是Docker宝塔面板更优?

    在 Windows 11 系统中进行 PHP 和前端开发,选择 WSL2 还是 Docker 作为开发环境一直是开发者关注的焦点。本文将对比分析在 WSL2 中直接安装宝塔面板与使用 Docker 容器(包含宝塔面板)两种方案的优劣,帮助您做出最佳选择。 目前,许多开发者采用 Docker 容器结合…

    2025年12月10日
    000
  • VSCode运行PHP报错“Class ‘mysqli’ not found”:如何解决?

    VSCode下PHP程序报错:Class ‘mysqli’ not found 在使用VSCode运行PHP代码时,遇到“Class ‘mysqli’ not found”错误,表示PHP无法找到mysqli扩展。 问题原因分析 该错误通常是因为PHP…

    2025年12月10日
    000
  • 如何在VSCode中实现ThinkPHP 6的代码提示?

    提升VSCode ThinkPHP 6开发效率:代码提示配置指南 高效的代码提示是流畅开发ThinkPHP 6应用的关键。本文将指导您如何在VSCode中轻松实现ThinkPHP 6的代码提示功能。 实现代码提示 借助合适的VSCode扩展,您可以轻松获得ThinkPHP 6的代码提示支持。 立即学…

    2025年12月10日
    000
  • VSCode 如何配置 ThinkPHP6 代码提示?

    VSCode ThinkPHP6 代码提示配置指南 在使用 VSCode 开发 ThinkPHP6 项目时,如果没有代码提示功能,将会大大降低开发效率。 本指南将指导您如何配置 VSCode,实现 ThinkPHP6 的代码自动补全。 第一步:安装扩展 首先,您需要安装 phpdoc comment…

    2025年12月10日
    000
  • VSCode 如何启用ThinkPHP6代码提示?

    VSCode 中启用 ThinkPHP6 代码提示的简易指南 在使用 VSCode 开发 ThinkPHP6 项目时,代码提示功能至关重要。本文将指导您如何轻松实现此功能。 为了获得 ThinkPHP6 的智能代码提示,您需要安装一个 VSCode 扩展: PHP DocBlocker: 此扩展程序…

    2025年12月10日
    000
  • 学习PHP的iOS开发者该如何选择编辑器?Syntra Small够用吗?

    为 PHP 学习选择最佳编辑器 作为一名网络开发人员,选择一款合适的编辑器至关重要。对于初学者,这可能让人无所适从。如果您正在学习 PHP,那么选择一款高效且易于使用的编辑器可以让您的学习之旅更加顺畅。 问题:对于 iOS 系统,您推荐使用哪款 PHP 编辑器?Syntra Small 是否是一个不…

    2025年12月9日
    000
  • PHP初学者,特别是iOS用户,应该选择哪个编辑器?

    PHP 编辑器的选择 对于初学者来说,学习 PHP 是一个明智的选择,但是选择合适的编辑器至关重要,尤其对于 iOS 用户。虽然 Syntra Small 可以在打英文时使用,但它在处理中文时会遇到问题。 推荐的 PHP 编辑器 推荐的 PHP 编辑器包括: 立即学习“PHP免费学习笔记(深入)”;…

    2025年12月9日
    000
  • .NET开发者学习PHP,哪个编辑器更好用?

    php开发编辑器推荐 对于.net开发人员学习php,选择合适的编辑器至关重要。本文将介绍Syntra Small的局限性,并推荐一个替代方案——VSCode。 Syntra Small的局限性 Syntra Small是一种适用于iOS系统的php编辑器。虽然它对于键入英语文本是合适的,但在输入中…

    2025年12月9日
    000
  • iOS系统下学习PHP,哪个编辑器最适合.NET开发者?

    学习php编辑器推荐 一位.NET开发者询问在iOS系统下学习PHP并寻找合适的编辑器。 推荐编辑器: 回答者推荐[VSCode](https://code.visualstudio.com/),并提供了配置指南链接。 Syntra Small工具的局限性: 立即学习“PHP免费学习笔记(深入)”;…

    2025年12月9日
    000
  • PHP初学者如何选择合适的编辑器?

    为 PHP 开发选择合适的编辑器 作为一名原本从事 .NET 开发的工程师,在公司要求下开始学习 PHP 后,您可能想知道使用哪种编辑器最合适。在 Mac 系统上,您已设置好 PHP 环境,可以使用 Syntra Small。然而,在输入汉字时遇到问题。 对于 PHP 开发,许多经验丰富的工程师推荐…

    2025年12月9日
    000
  • 前端和企业 PHP 开发者,哪个 IDE 更适合你?

    php ide 比较 对于偏向于前端和企业发展的 PHP 开发人员,这里推荐几个好用且专业的 IDE 选项: PHPStorm PHPStorm 是 JetBrains 开发的一款强大的 PHP IDE,深受开发人员的喜爱。它提供了许多高级功能,包括: 智能代码完成代码重构和重构版本控制集成调试和性…

    2025年12月9日
    000
  • 什么是 Xdebug?

    Xdebug 是一个强大的 PHP 调试和分析工具。它为开发人员提供了增强其调试和优化 PHP 应用程序能力的功能。以下是 Xdebug 的一些主要功能和用途: Xdebug 的主要特点 调试: 远程调试:Xdebug 允许您通过远程连接从 IDE 或编辑器调试 PHP 应用程序,使您能够单步执行代…

    2025年12月9日
    000
  • 婴儿学步学习 Laravel

    欢迎回来,开发者! ✨ 在 laravel 之旅的这一章中(请记住,我在撰写这些文章时正在学习,因此这将是您能找到的最现实的教程系列之一!),我们将深入研究我们的 laravel 项目。我们将探索项目结构,熟悉迁移,并以最简单的方式分解 mvc 架构。 ?今天的议程: 探索我们的项目结构 ?️ 了解…

    2025年12月9日
    000
  • 什么是EVM兼容链?它们如何让开发者轻松地将以太坊应用迁移过去?

    EVM兼容链通过复制以太坊虚拟机环境,使Solidity合约可直接部署或轻量修改后运行。1、配置链ID和RPC端点;2、使用Hardhat等工具重新编译并部署;3、更新外部依赖地址以适配目标链生态,确保合约正常交互。 Binance币安交易所 注册入口: APP下载: 欧易OKX交易所 注册入口: …

    2025年12月9日
    000
  • 如何查看瑞波币实时行情?哪些工具能提供准确数据?

    瑞波币实时行情显示,XRP价格在2.35至2.50美元区间波动,24小时成交量超18亿,市值约147亿美元,受ETF预期及链上大额转账影响,市场多空博弈加剧,投资者需关注2.40美元关键支撑位与监管动态。 查看瑞波币实时行情需借助专业数据平台,确保信息及时准确。 一、使用主流行情网站 专业的加密货币…

    2025年12月9日
    000
  • 什么是EVM兼容?它为什么对公链生态如此重要?

    EVM兼容指区块链能运行以太坊虚拟机代码,使智能合约与以太坊生态工具无缝对接。其核心在于字节码、Gas模型、状态树和账户体系的完全对齐。具备该特性公链可复用Truffle、Hardhat、ethers.js等开发工具,降低迁移成本,缩短上线周期。开发者仅需复制合约代码、修改网络配置、连接存储即可部署…

    2025年12月9日
    000
  • 恒星币铭文最新状态查询方法有哪些?一文了解币圈

    可通过区块链浏览器、API接口或第三方平台查询恒星币铭文状态。一、使用Stellar Expert等浏览器输入地址或哈希,查看交易详情中的Memo字段及成功状态。二、调用Horizon API获取账户交易历史,解析JSON数据提取memo_type和memo内容。三、通过Satoshi Portal…

    2025年12月9日
    000

发表回复

登录后才能评论
关注微信