微信小程序调试_微信小程序 微信调试模式 手机不生效 - CSDN
精华内容
参与话题
  • 微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个...

    微信小程序开发系列教程

    微信小程序开发系列一:微信小程序的申请和开发环境的搭建

    微信小程序开发系列二:微信小程序的视图设计

    这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。

    这个系列的下一步,会继续介绍这个微信小程序的控制器index.js的实现。在上一篇微信小程序视图源代码的讲解里,我们通过逐行讲解代码的方式,介绍了微信小程序视图的基本开发思路。但是讲控制器index.js, 仅仅采取静态的代码走查还不够,我们需要将微信小程序启动起来,通过单步调试的方式逐行讲解,通过控制器的调用上下文能对微信小程序的控制器实现有更深入的了解。

    为此我们先要学会微信小程序的调试方法。

    打开微信开发者工具,点击工具栏的“调试器”按钮:

    开发者工具右边的区域现在从上到下一分为二:上面蓝色区域还是代码编辑页面,下面红色区域就是微信小程序的调试工具。

    做过前端开发的朋友们,可以一眼就看出这其实就是Chrome的开发者工具。

    我在我的微信公众号“汪子熙”上也写过一篇Chrome开发者工具的使用技巧介绍,感兴趣的朋友可以去看看:

    链接如下:https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484306&idx=1&sn=314d749da91a94064ef1e258657a0974&chksm=ead5b105dda23813addbca28689e3fcc22c0b47cb2d4f49557ec796edfa8fe88c43d2c70567a#rd

    在调试器里打开我们的控制器index.js, 单击行号”3”, 然后行号3自动被高亮,说明第3行已经成功设置好了一个断点。

    点击“编译”按钮,我们的小程序自动启动,设置在控制器里的断点就自动触发了。这样我们就可以通过单步调试的方式来学习微信小程序控制器的调用上下文了。

    微信小程序的调试器在手机上仍然可以打开。在手机上访问微信小程序,点击屏幕右下角的vConsole按钮。

    接着整个手机屏幕就被微信小程序的调试器充满了。这个调试器和电脑上安装的微信开发者工具相比,仅仅能显示日志和执行一些简单的JavaScript操作,但是不能像电脑上那样,进行JavaScript代码的调试。

    我们注意到上图的“command…”输入框可以输入一些简单的JavaScript命令,比如console.log(“Jerry”)。

    然后可以在手机的调试器上看到输出的Jerry:

    System标签页可以看到一些微信小程序性能相关的参数和性能参数:

    MicroMessenger版本号:6.6.6

    Wechat lib: 库文件版本2.0.9

    navigation: 3ms 跳转时间3毫秒

    domComplete(domLoaded): dom加载总共花费19毫秒

    WXML标签页能显示当前渲染好的视图的明细:

    大家熟悉了微信小程序的调试器,就能开始下一章节关于微信小程序控制器的学习了。

    要获取更多Jerry的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

    展开全文
  • 微信小程序如何debug调试

    千次阅读 2018-08-15 11:06:59
    小程序程序中调用接口地址后加:?XDEBUG_SESSION_START=1 即可进入debug调试模式。前提是接口地址得是本地环境。 效果:小程序调接口时会直接跳转到PhpStorm对应接口打断点处。 此方法,对Postman也适用。 .....

    在小程序程序中调用接口地址后加:?XDEBUG_SESSION_START=1

    即可进入debug调试模式。前提是接口地址得是本地环境。

    效果:小程序调接口时会直接跳转到PhpStorm对应接口打断点处。

     

    此方法,对Postman也适用

    展开全文
  • 在上篇已经介绍过下载式了,可到微信小程序开发详细流程 一 (注册小程序及开发工具的下载)查看详细内容 下载地址: 前往开发者工具下载页面 模拟器:UI视图 这里是个小程序的模拟器,建议使用iphone6,原因后面会说...

    下面对微信web开发者工具做个简单的介绍

    下载:

    在上篇已经介绍过下载式了,可到微信小程序开发详细流程 一 (注册小程序及开发工具的下载)查看详细内容

    下载地址:

    前往 开发者工具下载页面

    模拟器:UI视图

    这里是个小程序的模拟器,建议使用iphone6,原因后面会说到,

     

    这里是小程序的一个功能区域啊,下面会一个逐一讲解,先看下一块,

     

    这个区域是我们在调试的时候,去查看变量的值和状态的一个区域

     

     

    我们来看一下编辑区域:

    编辑区域就是我们要写代码的地方了,左侧就是一个树状管理器,目录结构文件类型会在后面(小程序文件类型与代码构成)的文章做讲解.

    点击上面的"+"号会创建目录和文件,如下图,

    如果要在根目录下创建文件夹,如下图,

    小程序还给了一个很好的查找功能,点击放大镜,可以快速匹配到与你关键字相关的页面

     

    调试:

    就是上在说的调试器了,

    Console:

    顾名思义就是控制台了,会显示一些编译错误啊或是警告信息之类的,还有console.log()时,输出自己调试的一些信息

    Sources:

    这个能功区域主要就是让我们用打断点的,调试代码的,断点打在.JS文件(调试快捷键F10\F8)

    左侧是编译过后的一个树状目录结构,和刚刚上面的目录是对应该的,但是它会把一些WXML,WXSS等文件编译了,所以在这里是看不到的,这里就只有JS

     

    这里你会发现同一个文件名会有两个JS,一个是.js的,一个是后面带[sm]的,他们两个有什么区别呢,

    [sm]文件,其实就是你的源代码文件,它跟你编译器里写的代码是一模一样的.

    .js文件其实是已经给你编译过后的文件.看下图

     

    Network:

    这个大家应该都比较熟悉了,就看几个常用用要的话,比如左侧NAME,这就是些网络链接具体的列表

    这里应该是用的最多的,是具体查看每一个网络请求信息的一个地方,

    比如这个

    headers:就是显示一个它的每一个

    preview:就是一个预览

    http:请求头的一个信息.response就是显示的请求返回信息的一个地方

    timingz:每一个请求的具体耗费时间的一个管理

     

    Storage:

    查看缓存数据

    小程序有个很牛逼的地方就是支持本地缓存,比如我现在的项目,用户第一次使用输入身份证号,下次使用会默认填充

     

    AppData:

    根页面相关的,进行数据绑定的

    后面具体用到数据绑定的时候会再详细介绍,

        Wxml:

    实际就是小程序的一个UI界面,和UI代码

     

    这些功能都一目了然了,我就不说什么了

    再多说一句,因为小程序会校验证书,如果你是测试开发,在"详情"勾选不校验

     

    了解了这些基本就没什么问题了

    展开全文
  • 用Chrome调试微信小程序的方法

    千次阅读 2019-03-03 22:09:27
    微信小程序的开发一般就适用官方发布的“微信web开发者工具”了,可是,开始使用这个工具后,发现居然没有“调试”功能。 当然这其实只是官方没有写如何调试,实际上还是可以打断点,进行调试的,步骤如下。 步骤 1 ...

    问题

    微信小程序的开发一般就适用官方发布的“微信web开发者工具”了,可是,开始使用这个工具后,发现居然没有“调试”功能。

    当然这其实只是官方没有写如何调试,实际上还是可以打断点,进行调试的,步骤如下。

    步骤

    1 打开调试器的source面板

    默认在开发工具的右下方,如图
    调试器的Source面板

    2 在左边的Sources面板中找到需要调试的页面

    3 在中间的对应行的行号出打断点

    在这里插入图片描述

    4 开始调试

    调试也有跨步,单步,等调试模式,很方便

    展开全文
  • 微信小程序 - debug(调试

    千次阅读 2018-12-20 19:38:00
    微信小程序调试的方式是基于Chrome.     1. 常见console.log调试(可以具体参考console.log这个函数使用,它可不止这一个作用!)         2.使用NETWORK(我们可以查询到访问了那些接口以及请求头...
  • 微信小程序-单步断点调试

    万次阅读 2017-11-17 16:50:54
    总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍下微信小程序的一般用到的调试方法和...
  • 微信小程序怎么本地调试

    千次阅读 2018-06-28 00:35:35
    关于微信小程序本地调试的问题,因为需要https,所以请求起来比较麻烦,后来问身边的人才发现了最简单的解决办法!!!所以这里直接引进大家来了解一下。可能需要花几块= =,反正20不多。 首先引进的就是NATAPP,这...
  • 首先说一下使用方法如下,Button组件设置open-type="share"即可触发onShareAppMessage完成分享功能 <button class="toudi" open-type="share" catchtap="toujianli" data-qyuid='{{[item.uid,item.id,3,item....
  • 自己写的微信小程序,在手机上测试的时候只有打开调试模式才能用,在电脑上的开发工具上也能用,就是在手机上关闭调试模式后就不能用了,上传体验版也是这样,跪求大佬指点。。
  • uni-app开启微信小程序调试

    千次阅读 2019-04-02 19:56:50
    在开发uni-app项目过程如何开启微信小程序进行实时编译调试。首先根据官网做如下配置 1、点击“工具” -》 “设置” -》 “运行配置”,找到“微信Web开发者工具” 安装所在的文件夹。复制路径,填入到“小程序运行...
  • 使用微信开发者工具切新的页面保存刷新无法在左侧直接预览必须在app.json文件配置页面(填写路径但是不用写后缀名),并且把想要预览的页面放在第一个位置。 转载于:...
  • document.querySelectorAll("webview")[1].showDevTools(true); 转载于:https://www.cnblogs.com/xiaoyucoding/p/9988155.html
  • 按照hbuliderx官网上的教程进行了微信小程序调试,刚开始不知道怎么调。 解决:运行—>运行到小程序模拟器—>微信开发者工具,提示添加微信小程序开发者工具路径,按照下面提示的地址去下载工具就可以,然后...
  • 微信小程序调试时,点击调试样式按钮时,出现一个警告:‘请先切换至 WXml Pannel’,刚开始一直按‘编译’都不管用,其实很简单,如下图: 只要从source 切换到Wxml即可调试
  • 微信小程序预览模式和真机调试模式和带控制台信息的预览模式微信小程序的双缝干涉问题 微信小程序的双缝干涉问题 最近在项目中碰到了一个BUG。 测试时候发现真机调试和预览模式中居然不一样,这种情况其实也比较常见...
  • 踩坑:我在本地调式都没有错误,但是上传到体验版就看不到应该有的商品数据, 在开发工具上,真机调试没有错误,预览还是没有数据,在百度看到了这篇文章 ...小程序配置的是另一个域名,换域名后在微信后台没有改新...
  • 解决微信小程序调试接口时候的异常 调试接口的时候,我们常常需要直接连接后台服务进行断点,但是微信小程序对于url作了一定限制,下面是一个我自己写的SpringBoot服务,调用的时候报了一下异常: 这边提供...
  • 关于微信小程序调试时会出现不断闪屏现象的解决方案 原本微信小程序在调试的时候是好好的,但是当我反复点击不同页面进行测试的时候,问题出现了,页面不听的闪屏! 对没错,就是闪屏!。瞬间懵逼了。调试控制台没有...
  • 打开project.config.json,在setting下面增加 “checkSiteMap”: false
  • 微信小程序--调试

    2020-04-22 15:29:40
    微信小程序——调试 文章目录微信小程序——调试Console 页Sources 页Wxml 页AppData 页Network 页Storage 页 调试功能主要是帮助开发者排查问题与查看代码的实现,具体的界面如下图所示,本次介绍主要用到的调试...
1 2 3 4 5 ... 20
收藏数 31,390
精华内容 12,556
关键字:

微信小程序调试