vscode写debugger无效 / 谷歌F12想network接口和console一起出现

最新推荐文章于 2025-11-11 11:17:43 发布

原创最新推荐文章于 2025-11-11 11:17:43 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #ide #编辑器

本文讲述了在VSCode中使用debugger遇到问题时，如何在Vue.config.js中添加sourcemap配置以启用调试。同时介绍了在谷歌浏览器中快速打开并同步Network和Console的方法，包括使用Esc键和右上角菜单操作。

vscode写debugger无效

在项目里，想用debugger打断点调试，发现不生效

在vue.config.js文件中，搜索configureWebpack，在里面加 devtool:"source map",

重新运行项目，就可以用debugger了

谷歌浏览器F12接口和console一起出现

F12调出调试工具后，想要这种效果

Network和Console一起出现

方法一：点Esc，就出现了

方法二：右上角三个点，选择More tools，然后随便选一个就可以了

想要的效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

38kcok9w2vHanx_

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

亲测解决vscode的debug用不了、点了没反应

狂小虎/Anthony Dave的博客 KuangXiaoHu's Blogs

02-05

6990

这个问题在小虎登录vscode同步了设置后出现，原因是launch文件被修改或删除。解决方法是重新添加launch。

F12 console的用法，以及如何debug程序？

IT修真院：初学者转行到互联网的聚集地

11-23

1586

大家好，我是IT修真院的一枚正直纯洁善良的WEB程序员，今天我给大家分享的是，修真院官网 JS 任务一深度思考中的知识点——F12console的用法，以及如何debug程序 1.背景介绍 debug这个词最初源于一位名叫GraceHopper的美国海军准将及计算机科学家在调试故障设备时，在继电器中发现的一只被夹扁的臭虫（bug）。从此至今，bug便成为程序漏洞的代称，deb...

参与评论您还未登录，请先登录后发表或查看评论

vue2用vscode调试打不上断点

小妖666个人笔记

03-15

939

vue2用vscode调试打不上断点

基于在vscode中的console.log输出的内容，多端的时候查看的问题

最新发布

shenboyushshh的博客

11-11

444

2：当前项目下创建server.js文件，定义好txt文件名称的命令，我这边只是简单来进行使用，高阶的话可以分出每天或者每个小时生成的 console.log输出内容。本人也使用过 .vscode 文件来实现，但是在电脑端上可能可以实现查看输出，但是在其他端打开我本地的ip就查看不到输出了，1. 项目中，本地运行的时候遇到比如说我本地项目运行在手机上查看，但是vscode中接收不了console.log输出，3：然后我们在cmd中运行 node server 来启动 node 服务。

vscode启用项目后，没有触发debugger

weixin_47084275的博客

07-09

1033

启动项目后在debugger时，一直不走断点，重启vscode和电脑，打开其他vscode项目，都不行。2.然后取消忽略列表的勾选即可。

vscode突然无法debug

Kinship_Jade的博客

07-20

4562

vscode的debug几天前还可以正常使用，今天调试代码，突然无法debug，多方查询之后发现，原来是vscode中Python插件的自动更新，导致原来Python版本为3.6的程序无法启动。

windows wsl2 vscode golang debug不生效问题排查

云原生运维的博客

02-08

2151

vscode golang 断点调试配置

vscode中debug时，没有响应

A_Student10000的博客

01-21

1609

可能是python编译器版本过低，python3.6及以下不能debug，尝试切换python版本。

debugger 无效问题

天天写代码

12-21

2914

浏览器更新后,代码中的debugger在浏览器中无法生效了,这对于常用debuger来看上下文逻辑的我,简直就是晴天霹雳,直呼,不可能,绝对不可能.

前端vueH5代码debugger无效

10-12

首先，用户的问题是：“前端vue H5代码中debugger无效的解决办法”。这涉及到在Vue应用中，debugger语句不起作用的情况。从系统指令中，我需要： - 所有行内数学表达式使用$...$格式（但这里可能不涉及数学表达式...

js中console在一行内打印字符串和对象的方法

01-19

在前端开发中，大多数的调试一般都是F12中的console和network中查看请求数据和响应数据，也有一部分人喜欢用debugger。在开发大一些的项目时，在开发环境下，打开着控制台，切换一下页面总是充满着各种console，...

如何让302重定向的页面始终打开F12记录接口

03-20

要实现在浏览器接收到302重定向响应后自动打开开发者工具（F12），并通过控制台记录网络接口的行为，可以采用以下方式： #### 方法一：通过JavaScript强制调用开发者工具虽然现代浏览器并不允许直接通过脚本触发`...

<template> <div class="container"> <div class="preview-content" v-if="fileLink"> <iframe :src="fileLink" frameborder="0" class="preview-content-iframe"></iframe> </div> <div class="error-message" v-else> 文件评审链接加载失败，请检查网络或数据。 </div> </div> </template> <script> import { ref, onMounted } from 'vue' import { useRoute } from 'vue-router' import axios from 'axios' export default { setup() { const route = useRoute() const fileLink = ref(null) const fetchPreviewLink = async () => { try { const tableId = route.query.TableId if (!tableId) { console.warn('缺少参数 TableId') return } debugger // 获取文件信息 const fileRes = await axios.get('/api/Flow_Task/getFile', { params: { TableId: tableId } }) const fileData = fileRes.data debugger if (!fileData) { console.warn('未找到文件信息') return } const flowInstanceID = fileData.Id console(flowInstanceID) debugger // 获取流程ID const flowIdRes = await axios.get('/api/Flow_Task/getFlowID', { params: { flowInstanceID } }) const sFlowID = flowIdRes.data.flowID debugger if (sFlowID === 'fileBatchFlow') { const encodedReviewId = encodeURIComponent(flowInstanceID) const targetUrl = `/#/Drawings_Online_Approval_A?reviewId=${encodedReviewId}` fileLink.value = targetUrl window.open(targetUrl, '_blank') } else { // 获取当前用户工号 const workNumRes = await axios.post('/api/Review_Info/getCurrentUserWorkNum') const sWorkNum = workNumRes.data.sWorkNum // 构造跳转 URL const sFileCode = encodeURIComponent(fileData.FileCode) const sReviewVersion = encodeURIComponent(fileData.FileVersion) const targetUrl = `http://10.9.38.83:5773/#/document-review?sFileCode=${sFileCode}&sWorkNum=${encodeURIComponent( sWorkNum )}&sReviewVersion=${sReviewVersion}` fileLink.value = targetUrl window.open(targetUrl, '_blank') } } catch (error) { console.error('处理跳转逻辑失败:', error) alert('处理跳转逻辑失败，请查看控制台日志') } } onMounted(() => { fetchPreviewLink() }) return { fileLink } } } </script> <style lang="less" scoped> .container { display: flex; width: 100%; height: 100%; flex-direction: row; flex-wrap: wrap; border-right: 1px solid rgb(182, 197, 240); border-bottom: 1px solid rgb(182, 197, 240); .error-message { font-size: 24px; color: #d90000; text-align: center; padding: 20px; width: 100%; height: 100%; } .preview-content { width: 100%; height: 100%; margin-top: 5px; border: 1px solid #dfeafc; .preview-content-iframe { width: 100%; height: 100%; } } } </style> 我这个写的有问题吗？为啥 const fileRes = await axios.get('/api/Flow_Task/getFile', { params: { TableId: tableId } }) 这个走完没走到下个debugger

10-22

VSCode python debug突然失效问题的解决

kouwang9779的博客

04-04

8915

VSCode python debug突然失效问题的解决问题描述 VSCode突然对python文件就不能进行debug了，但是可以正常直接运行，如果点击’Run and Debug’会没反应。解决办法应该是python插件自动更新的原因，将python插件的版本回退到之前的旧版本即可。旧版本的python extension可以在在这里下载https://code.visualstudio.com/updates/v1_66 Reference: https://docs.microsoft.c

VScode的debug功能失效

李白吃肥牛的博客

11-23

2025

今天在linux服务器上跑实验的时候发现vscode突然不能调试了，并且出现说什么“–不是list”然后说连接不上：于是按照以下方法解决了问题：在setting.json文件中加入上述的代码。注意，是加在C盘的setting文件中，不是远程的那个 ...

Vscode突然无法debug的解决办法