微信开发工具调试窗口怎样查看netWork

最新推荐文章于 2025-04-02 15:19:51 发布

原创最新推荐文章于 2025-04-02 15:19:51 发布 · 6.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信开发者工具

本文记录了解决微信开发者工具更新后调试窗口消失的问题，通过安装sourceMap匹配的调试插件进行修复的操作步骤。

今天上午更新完微信开发者工具之后打开调试器发现调试窗口取消了
摸索了一会，在这记录一下
解决方案：
打开设置—>调试器插件—>安装sourceMap匹配调试插件
完成
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

随便放个文字在这里

关注关注

2
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

小白学习微信小程序开发的调试技巧

wx_linying1029的博客

07-10

205

通过以上介绍，小白学习微信小程序开发的调试技巧包括使用console.log进行调试、使用Chrome开发者工具进行调试、使用断点进行调试、使用Google Chrome调试工具进行网络请求的调试、使用微信开发者工具的调试功能等。微信小程序内置了部分API用于发起网络请求，可以通过Google Chrome调试工具来查看这些网络请求的详细信息，包括请求头、响应头、请求方式、请求参数等。在Chrome开发者工具中的Network面板可以查看当前页面发起的网络请求，包括请求的详细信息和响应结果。

微信开发者工具查看network

weixin_40388250的博客

08-15

749

我整理的一些关于【网络】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/yOSbkR微信开发者工具中的网络调试微信开发者工具是一个为开发者提供的强大工具，能够帮助我们开发和调试小程序。在开发过程中，网络请求是不可避免的一部分。本文将探讨如何通过微信开发者工具查看网络请求，并...

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

微信开发者工具network不显示任何请求

weixin_42998455的博客

11-19

1万+

今天打开微信开发者工具network不显示任何请求，但之前显示正常。原来无意中选择了only show requests with samesite isuser，取消选中后问题解决。

微信开发者工具，network不显示接口信息

qq_42440919的博客

04-02

977

可以改一下基础库，改成跟现在接近的，然后推送。

微信开发者工具真机调试Network为空解决方案

jie_rookie的博客

11-28

1810

微信开发者工具真机调试Network为空解决方案

微信小程序开发真机调试network 无法显示请求信息?

qq_42267338的博客

10-17

5329

今天我准备测试登录的时候发现在真机调试的network 没有打印的接口请求信息，最开始我以为是配置项或者电脑卡顿的问题，尝试重启电脑和重启项目都没有效果。始终没有打印任何内容，询问官方也是一直在排队，最后看了一下网友们的办法挨个尝试了一下。更换调试基础库，换跟你现在版本最接近的，然后点击推送。推送完成之后重新尝试，这次就有内容了。

【微信小程序】network 中request请求不显示也不报错

m0_51744718的博客

02-20

2262

【微信小程序】network 中request请求不显示也不报错

微信小程序开发-调试及配置文件介绍

epitomizelu的专栏

10-07

2859

这样，来自相同来源的系统日志就会被隐藏，不再显示在控制台中。如果你需要再次查看这些日志，可以通过控制台的过滤(Filter)功能来重新显示它们。

微信小程序开发—微信开发者工具界面认识

ylycrp的博客

11-11

1859

认识小程序开发页面，调试小程序

微信开发工具及微信小程序开发原理总结

qq_42286669的博客

07-28

1130

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

真机调试,network 无法显示请求信息控制台onRequestTaskStateChange 6 not found

weixin_44665610的博客

06-22

1366

真机调试,network 无法显示请求信息控制台onRequestTaskStateChange 6 not found 借鉴网址:https://developers.weixin.qq.com/community/develop/doc/000eac38328e7880848a6900a56000?highLine=network%25E7%259C%259F%25E6%259C%25BA%25E8%25B0%2583%25E8%25AF%2595 近两天微信小程序突然真机调试看不到请求，但请求是成功的

Devtools—Network

sinat_41838539的博客

03-16

640

在上文（4）Network（网络面板）中，我们初步领略了 Devtools 基本功能，本章节，较为详细介绍下常用的Network 网络面板。持续更新

微信小程序开发之真机预览

weixin_30339969的博客

05-25

467

1：真机预览时上传组件的坑：当在真机里面使用上传组件，当进入选择相片或者拍照的时候，小程序会进入后台，调用APP onHide（）方法，选择完返回小程序是会调用App Onshow（）方法，然后调用主页js里面的onshow（）方法。而本地开发工具测试时并不会出现这种情况，这将导致如果你在主页js onshow里面写了初始化数据的话，在真机预览状态下可能会给你带...

【微信小程序】微信Web开发者工具的部分界面功能

颜颜yan_的博客

11-03

3025

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~

【微信小程序】network 中request请求不显示

AAAXiaoApple的博客

05-17

2129

1，，在微信公众平台设置合法域名 2，调式基础库版本太低

【微信小程序】一文读懂，数据请求_微信小程序体验版调试查看请求

2401_84182020的博客

04-30

2412

信任列表我们可以在微信开发者工具中的工具栏–>详情–>项目设置–>request合法域名中查看。默认为空。那么如何添加呢，且看下方。

【微信小程序】一文带你搞懂小程序的页面配置和网络数据请求

最新发布

08-22

<think>我们正在微信开发者工具中调试内嵌H5页面，需要查看H5页面的console日志。根据引用[1]的内容，微信开发者工具提供了专门的调试功能来查看Webview内嵌H5的日志。具体步骤： 1. 在微信开发者工具中打开你的小程序项目。 2. 在模拟器界面中，找到右下角有一个类似“爬虫”的调试图标（或者是一个调试器的图标）。 3. 点击该图标，会弹出一个新的DevTools窗口（这个窗口是专门用来调试Webview内嵌H5页面的）。 4. 在这个新窗口的顶部菜单栏中，选择“Console”标签页，这里就会显示H5页面中通过`console.log`输出的日志信息。注意：这个功能需要在小程序运行并加载了Webview中的H5页面后才能使用。如果H5页面没有加载，则看不到日志。另外，引用[1]还提到，有时候在浏览器中打印正常，但在小程序内嵌H5中不显示，就可以通过这个方法来调试。因此，按照上述步骤操作，即可在微信开发者工具中查看内嵌H5页面的console日志。如果问题还未解决，可能还需要检查： - H5页面是否正常加载（可以在Webview的src中确保路径正确，且业务域名已配置，引用[3]提到了业务域名白名单的配置） - 确保H5页面中确实有console.log输出 - 确保你点击调试按钮时，H5页面已经加载完成（可以尝试在H5页面加载完成后，延迟几秒再点击调试按钮）希望这个回答能帮助你解决问题。 §§相关问题§§ 1. 微信开发者工具中如何调试内嵌H5页面的网络请求？ 2. 微信小程序中Webview加载H5页面时，如何捕获加载失败事件？ 3. 微信小程序中Webview内嵌H5页面如何与小程序的页面进行通信？</think>### 如何在微信开发者工具中查看内嵌H5页面的Console日志通过微信开发者工具查看内嵌H5页面的Console日志，请按照以下步骤操作： 1. **启动项目调试** 在微信开发者工具中打开您的小程序项目，点击顶部工具栏的 **"预览"** 或 **"真机调试"** 按钮启动项目。 2. **打开Webview调试窗口** - 在模拟器界面右下角找到 **调试图标**（形似爬虫或放大镜的图标） - 点击该图标，将弹出新的 **DevTools调试窗口**[^1] 3. **查看Console日志** - 在DevTools窗口顶部切换到 **Console标签页** - 此时会显示内嵌H5页面中所有`console.log()`输出的日志 - 支持查看错误、警告及普通日志信息 ![操作示意图](https://example.com/debug-flow.png) *(图示：调试按钮位置 → DevTools窗口 → Console标签页)* 4. **高级调试功能** - **网络请求**：切到Network标签页查看H5的HTTP请求 - **元素检查**：使用Elements标签页审查DOM结构 - **源码调试**：在Sources标签页设置断点调试JavaScript ### 常见问题排查 - **看不到日志？** 确保H5页面已加载完成（检查Webview的`bindload`事件） - **白屏问题？** 确认H5域名已添加到小程序后台的 **业务域名白名单**（引用[3]） - **真机无日志？** 在H5页面中集成`vConsole`库实现真机日志输出： ```html  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script>new VConsole()</script> ``` > 关键提示：此调试方法仅适用于开发阶段，正式环境需移除调试代码。若需PC端调试微信H5，可参考引用[5]的cookie注入方案。