使用微信开发者工具的调试器

已于 2022-07-03 09:36:34 修改
阅读量4.5k 收藏 4
点赞数 1
分类专栏： # uniapp 文章标签： 前端
于 2022-06-27 19:24:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Joye_7y/article/details/125490359
版权

在工作中，前端向后端发送请求，拿到数据。由于各种原因，会导致拿不到数据等，所以学会调试接口是必要的。

以下是使用微信开发者工具的调试器介绍

请添加图片描述

  • Wxml：可看到真实的页面结构和属性，通过左边的选择器，可快速找到页面中元素对应代码

  • Consle：显示小程序的错误输出，打印console.log的内容，可在此输入和调试代码

  • Storage：显示当前项目中使用setStorage或setStorageSync储存在本地的数据

  • Sources：小程序编译出错时可点击错误跳转到这里查错，打断点调试

  • Network：观察和显示接口的请求情况

    • 选择XHR：可查看当前发送的请求
      • 点击请求：Headers可查看请求数据（最底下Request Payload显示请求接收到的参数）Preview和Response可查看响应数据

  • Appdata：显示项目当前页面 appdata 里的实时数据情况，可在此处编辑数据，并及时反馈到界面上

我平常调试接口的步骤：

  1. 查看状态码
  2. 检查请求路径、方式
  3. 请求头类型
  4. 查看是否传递参数，检查参数格式
  5. 查看后端返回的数据Preview
使用微信开发者工具进行小程序生成与发布
吃不胖.
04-27 1176
微信开发者工具是一款由微信官方推出的用于开发、调试和发布小程序的集成开发环境。它提供了丰富的功能和工具，方便开发者进行小程序开发和调试，并且支持将小程序发布到测试环境或正式环境。本文将详细介绍如何使用微信开发者工具进行小程序的生成与发布。
微信小程序里面的单步调试和变量查看
热门推荐
bright789的博客
01-24 4万+
在微信小程序开始学习与开发的过程中，总有一些东西，想看看它跑起来的内容与我们编程时想的是否一致，于是就想到了能不能单步调试或者打出一些我们想要的变量的内容，以便我们做进一步的开发和调整，现在我就要介绍下微信小程序的一般用到的调试方法和打印日志以及看到变量里面的运行值。 第一步：打断点，我们必须在我们想要它停下来的地方打上调试断点，点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”S
微信开发者工具下载及小程序项目的创建与调试（完整图文教程）
Captinyoo的博客
03-04 1万+
本文将介绍微信开发者工具下载及小程序项目结构与工具的详细讲解，涵盖了微信小程序开发的许多关键方面，从工具的下载、安装，到项目的创建和结构讲解，以及调试和基础库的选择等。
微信开发者工具debug的使用方法
最新发布
tzk666666的博客
02-11 665
微信开发者工具debug的使用方法
图解 微信开发者工具 小程序源码 调试、断点标记方法 ， 微信小程序调试器，真机调试断点调试方法，小程序网络API请求调试方法 总结
Tekin 是深耕技术 20 年的全栈实战派专家，精通 Go/Python/Java 等多语言开发。博客专注技术原理与实战结合，深度解析 Python 高阶编程、Go 语言架构、数据库优化等硬核内容。涵盖并发编程、机器学习、云原生等前沿领域，通过真实案例拆
10-09 5243
微信小程序的源码调试 在调试器里面的断点文件位于调试器-->Source -> Page -->appContext --> weapp:// 这个节点下 文件后缀为[sm]的js文件， 而真机调试的断点文件位于 真机调试窗口Source -> Page -> usr节点之下。 他们的调试方式与chrome的开发者工具里面的调试方式是一样的，只不过位置节点不一样而言， 对于其他的各种小程序的调试方法也都是大致一样的。
微信开发者工具-调试器
huangzhin的博客
07-23 9710
微信开发者工具-调试器 调试器常用的 6 大功能模块有：Console、Sources、Network、Appdata、Storage、Wxml Console Console有两大功能： 1）开发者可以在此输入和调试代码  2）小程序的错误输出，会显示在此处 Sources Sources 用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sou...
微信开发者工具的构成及调试器的功能
ldjgood的博客
07-19 4281
微信开发者工具区域构成 调试器区域各个面板的功能 Wxml面板：用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，还可以查看数据是否渲染到页面的代码上。同时可以通过修改对应的代码，在模拟器中实时看到修改的情况（仅为实时预览，无法保存文件）。通过调试器区域左上角的选择器，还可以快速找到页面中组件对应的 wxml 代码。 Console面板：可以用来显示小程序的输出信息、出错信息等，还可以在控制台中输入build（编译小程序）、preview（预览）、u
在微信开发者工具中开启调试模式时
weixin_36820096的博客
08-03 1348
在微信开发者工具中开启调试模式的指南 微信小程序的开发过程离不开调试，开启调试模式可以帮助我们更快地找到问题并优化代码。在这篇文章中，我们将详细介绍如何在微信开发者工具中开启调试模式，并提供一些代码示例以便更好地理解。 什么是调试模式？ 调试模式是开发者在编写代码时，进行实时测试和查看错误的功能。当你在微信开发者工具中开启...
如何让微信开发者工具显示切后台按钮，微信开发者工具显示“切后台”按钮
02-26
该工具是微信官方为了方便开发者调试和预览小程序而推出的一款集成开发环境，包含了代码编辑、预览、调试和发布等一系列功能。在主界面的右上角，可以看到一个设置图标，点击它，进入设置页面。 在设置页面中，我们...
微信开发者工具1.05.22
01-14
通过使用微信开发者工具1.05.22，开发者不仅可以快速构建高质量的微信小程序，还可以享受到持续更新和完善的功能，以适应微信小程序平台的不断演进。对于想要涉足微信小程序开发的个人或团队来说，这是一个不可或缺...
微信开发者工具IDE主界面、调试工具介绍
Xixoqw的博客
06-15 3566
过去0前端基础的我如果能看到这篇文章，应该会少走很多弯路。 文档中的截图来自项目：“黄蔷的记事本第一季”，以下简称“此项目”。 工具栏介绍 IDE界面最上面一行是工具栏，在此项目中主要用到的工具有模拟器、编辑器、调试器、云开发、编译预览。单击后即可显示/隐藏对应的模块，现在依次介绍各部分功能。 模拟器介绍 模拟器可以显示当前代码对应的预览界面，并能够模拟用户在其上进行点击、拖动、跳转界面。前端框架效果可以非常直观地反映在模拟器界面。 编辑器介绍 ## 文本编辑 文本编辑器，支持多栏对比显示，具有相对完善
微信小程序断点调试.
08-07
微信小程序的断点调试，是相当重要的，因为微信的小程序的调试，本事不是太难。
微信开发者工具-真机调试
yf18040578780的博客
08-17 6884
微信开发者工具-真机调试
微信开发者工具（调试器加载错误，从任务栏打开可能会导致该问题）
xiaoyuer_2020的博客
12-08 2424
更新了最新的微信开发者工具之后，打开调试项目时报错： 调试器加载错误，从任务栏打开可能会导致该问题将下方工具栏的微信小程序开发者工具取消固定，并重新开启后，就可以连接调试了。
【微信小程序】新手入门必须掌握开发工具的代码断点调试步骤
落叶随风将要去远方，看沿途的风景回忆一场...
06-02 3605
掌握开发工具基本的代码断点调试步骤，新手可以更加有效地进行代码调试和找出问题并得到解决。
解决微信开发工具的调试器加载错误，从任务栏打开工具可能导致该问题，请不要从任务栏启动工具。 和调试器控制台显示为空，刷新出不来的问题。
m0_73647713的博客
09-27 2412
解决微信开发工具的调试器加载错误，从任务栏打开工具可能导致该问题，请不要从任务栏启动工具 。 和调试器控制台显示为空，刷新出不来的问题。
微信开发者调试模式
weixin_41110341的博客
08-11 686
微信开发者调试模式的实现指南 作为一名新手开发者，在使用微信小程序进行开发时，调试工作是必不可少的。调试模式可以帮助你实时查看代码的变化，捕获错误，让你更高效地完成开发任务。本文将为你详细介绍如何实现微信开发者调试模式。以下是实现流程的概览，我们将分步说明每个环节的具体操作。 实现流程概览 步骤 描述 1 安...
微信小程序开发教学系列（11）- 小程序开发工具与调试技巧
赤兔码
08-28 1290
微信开发者工具是开发微信小程序的必备工具，它提供了代码编辑、调试、真机预览等功能，方便开发者快速开发、调试和发布小程序。
微信开发者工具_导入小程序项目找不到界面设置(调试器等窗口)
xuchaoxin1375的博客
10-17 1049
文章目录症状solution 症状 导入的项目没后出现红框部分,甚至连界面选项卡都没有. solution 把打开记录删除后重新导入
微信开发者工具扫码uniapp
02-11
### 使用微信开发者工具扫描 UniApp 项目二维码 为了能够通过微信开发者工具扫描 UniApp 项目的二维码，需遵循一系列操作流程来确保整个过程顺利进行。 #### 准备工作 确保已按照规定完成了 uniapp 小程序的注册与备案[^1]。这一步骤至关重要，因为只有经过认证的小程序才可生成合法有效的二维码供他人扫描体验。 #### 启动微信开发者工具并登录 下载并安装好微信开发者工具后，启动该应用程序并通过手机上的微信客户端扫描界面上显示的二维码完成登录动作[^2]。 #### 导入 UniApp 工程至微信开发者工具 在微信开发者工具内选择“项目”-> “添加项目”，随后挑选本地存储着的 uni-app 应用文件夹作为新加入工程的位置；接着输入必要的基本信息如应用 ID (即 AppID)，最后确认添加此项目到当前环境中。 #### 运行与预览项目 当一切准备就绪，在微信开发者工具界面顶部找到代表“编译”的按钮——通常是一个带有箭头指向右侧圆圈图案的图标，单击它即可触发构建过程并将最新版的应用部署到模拟器当中去。与此同时，“预览”选项同样位于菜单栏里，激活它可以即时产出一个可供分享使用的临时链接形式的二维码图像。 此时，利用个人设备中的微信软件扫描上述提到的二维码图片，便可以直接加载出由 HBuilderX 构建出来的 uniapp 页面效果来进行实际检验了[^3]。 ```python # 示例 Python 代码用于说明如何调用接口获取支付 URL 并转换为 QR Code（仅作示意用途） import requests from uqrcode import QRCode, ERROR_CORRECT_L def get_payment_url(order_id): response = requests.post('https://example.com/api/create_order', json={'order_id': order_id}) payment_link = response.json().get('payment_url') qr = QRCode(error_correct=ERROR_CORRECT_L) qr.add_data(payment_link) qr.make() img = qr.make_image(fill_color="black", back_color="white") img.save(f'./{order_id}_qr.png') if __name__ == '__main__': get_payment_url(1234567890) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值