微信开发者工具调试大法
由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下:
第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点开”Top”根节点,层层打开,找到自己想要调试的js文件,一般是打那种.js后面带[sm],如index.js[sm],非index.js,当然这里之后想修改内容不能在”调试”模式下修改,而要转到”编辑”模式,之前我老容易犯这个错误,打开index.js[sm]文件后,点击左边的行上的数字,就会由灰色背景变成蓝色背景,这样断点就打好了,(如果不想要了,也可以点击就会取消)如下图所示:
第二步:运行,首先点击编译上面的那个运行小图标(或者快捷键ctrl+b),然后操作到你想要的那个界面或者触发某个动作,程序自动会跑到断点处代码,如下图所示:
第三步:单步调试,按调试器窗口(debugger)的向下箭头(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示
如果想看调试中变量的运行值怎么办?有许多办法,这里以查看上个界面传来的options变量值为例
办法1:让鼠标指针放在变量上,他会有提示框,框内就是变量值,如下图所示
办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示
方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示
如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?
办法就是点击调试器窗口中的图标,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)
微信开发者工具调试大法相关推荐
- 微信开发者工具调试公众号网页提示: 未绑定为公众号的网页开发者
前言 工作中难免需要给客户处理各种问题,此时开发者需要使用微信开发者工具调试,调试前需要客户将开发者配置为公众号的网页开发者.为了避免重复沟通,特写篇文章记录配置过程 1. 情景再现 开发者使用微信开 ...
- 微信开发者工具-调试器
微信开发者工具-调试器 调试器常用的 6 大功能模块有:Console.Sources.Network.Appdata.Storage.Wxml Console Console有两大功能: 1)开发者 ...
- 微信开发者工具,调试公众号网页,控制台不显示,解决方案
微信开发者工具,调试公众号网页,控制台不显示,解决方案 第一步:关闭"微信开发者工具" 第二步:在C盘找到该路径 C:\Users\当前系统用户名\AppData\Local\ 在 ...
- 微信开发者工具调试器是空白的
微信开发者工具调试器是空白的 微信开发者工具开发小程序的时候想看网络请求发现调试器是空白的,我还在想,什么垃圾,竟然不能看网络请求,然后咨询了一下客服,原来是IDE升级版本之后出现的bug,退出之后重 ...
- 如何使用微信开发者工具调试在微信端访问的网页
假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试. 假设我的web应用的访问入口是如下公众号菜单的"预约"按钮: ...
- 使用微信开发者工具调试微信网页授权登录-react
转:https://www.jianshu.com/p/9ced1a297c95 1.使用localhost本地调试 使用微信开发者工具, 选择微信网页授权, 微信团队为广大的开发者提供了一个测试账号 ...
- uniapp如何使用微信开发者工具调试
因为不太熟悉移动端开发,最近在上手小程序开发的时候,遇到一些问题,记录一下. 首先,技术选型为uniapp,毕竟人家是一套代码,多端运行的嘛,够强大! 1.在HBuilder中引入代码,然后使用快捷键 ...
- 使用uniapp开发微信公众号(H5页面),用微信开发者工具调试微信公众号
1.先引入入口.html文件 参见官网https://uniapp.dcloud.io/collocation/manifest?id=h5-template 2.配置manifest.json 3. ...
- 如何使用微信开发者工具调试前后端接口
在微信小程序中,如果前后端分离开发的话,是需要通过接口来进行交互的, 因此在联系不到后台的情况下,写前端的我们应当如何测试自己的页面呢?方法如下: 微信小程序前端与后台交互的时候使用的是request ...
最新文章
- KNN(K Nearest Neighbors)分类是什么学习方法?如何或者最佳的K值?RadiusneighborsClassifer分类器又是什么?KNN进行分类详解及实践
- VMware vsphere client报错问题
- Kali安装magescan评估工具
- Linux驱动模块编译进内核中
- Linux概述及centos版本介绍和下载地址
- Ansible 入门:安装 简例 playbook应用
- sql字符串函数_SQL字符串函数概述
- 大一上期c语言实验报告2,大一上期C语言实验报告1熟悉实验环境
- python syntax error_python提示Syntax Error报错解决教程
- python 表情包制作工具_大型电视连续剧《亮剑》相关表情包制作
- lpk劫持方式粘滞键后门后门T00ls Lpk Sethc v3.0 正式版下载
- PaddleX快速实现图像分类训练
- 从《道德经》看项目经理修炼的7条法则,你做到了几条?
- pytorch操作基礎(二)——基礎
- pandas操作excel,matplotlib.pyplot画图插入到excel,处理复杂excel简单练习
- Matlab利用plot函数绘制散点图
- hadoop-2.6下载地址
- node-red端口争用问题
- 华为手机文件在内部存储路径_Android手机自带内部存储路径的获取
- 20060427-汉字区位码查询与算法——microsoft visual studio 2005系列
热门文章
- 统计学习理论简介(一)
- 单片机STM32的5个时钟源知识,你不能错过。
- 【Python】摄氏度与华氏度互相转化
- VUE基础、表达式和指令
- 易语言删除首尾空白符代码
- WebGIS开发绘制地图标注
- 微信客服机器人(踩坑记录、SpringBoot、企业微信)
- 2的一百万次方 用计算机算,1M换算:计算机里,单位里1.大家都知道数字1M=10^6对吧(M=Million),以10为底,6次方 2.计算机里1...
- 教务管理系统(免费源码获取)
- 微信小程序Canvas卡顿优化解决方法