• 由于小程序的火爆,于是去开源中国接了个私活,开发...第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点...

    由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟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 下载 微信web开发者工具:https://mp.weixin.qq.com/wiki?t=resource/res_main&...3 打开微信web开发者工具 ,选择如下图PS:我使用了很多手机,小米max ,iphoneX,小米5sp等等。。。没有一个能使用 X5Blin...

    1 下载 微信web开发者工具:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

    下载一个自己能用的版本:


    2 手机开启  USB调试,不赘述了。每个版本显示方法不一样。

    手机通过数据线连接PC端


    3 打开微信web开发者工具 ,选择如下图

    PS:我使用了很多手机,小米max ,iphoneX,小米5sp等等。。。没有一个能使用 X5Blink调试。。。我也开启了TBS 内核 Inspector 调试功能。但是没用。。。。

    选择移动调试,选择普通调试




    4 手机连接wifi,确保wifi和pc端在同一个网段。(这个问网管就行了)

    连接玩后,进入wlan,设置: 

    代理:手动

    主机名:上面步骤1的网卡地址,我这里是192.168.1.88


    5 微信开启一个页面,然后点击微信web开发者工具的 开始调试。

    PS: 必须先开启页面,再点击开始调试!!!

    本机访问地址: http://192.168.1.88:804/controller/action  这样的iis发布地址


    6 成功的样子:


    失败的样子,就是黑色字体。Targets:none


    具体可以参考:https://www.jianshu.com/p/13d3c2fa5412

    展开全文
  • 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩...

    使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)

    前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正。放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容。下载以后直接安装就好。

    1.下载安装好以后,打开界面是这样的。

     

     

    2.我们点击登录,会出现扫描二维码页面,用你自己的微信扫一下登录就可以

      

     

    3.登录以后,就可以对我们的微信企业号页面进行调试,请注意!!!要想调试当前的企业号页面,你登录的微信号,必须是这个企业号的管理员(这在微信开发者工具的说明文档有写),如果不是,请在你们的企业号开发端把你的微信设置为管理员。否则在开发者工具里面将会出现下面这个页面,如图

     

       管理员设置界面如图:

       

     

    在企业号管理页面添加完毕以后,会在你的手机微信端有提醒,记得按照他的提醒设置一下开发者工具的登陆密码,如果没有设置密码,你依然登陆不上去,如图所示:

     

    设置完密码以后,我们点击登录,发现还是上不去,如图所示:

     

    点进去以后,如图所示:

     

    2.上面所有的都设置过以后,我们登陆开发工具,随意打开一个公众号的页面,复制链接放在开发工具的地址栏,现在基本上就可以在电脑上面进行调试了。页面如图:(关注一下移动调试)

     

    3.这个工具更加强大的功能!点击窗口中的移动调试。

      3-1.如图所示,我们先选择Android设备调试--普通调试,

      

     

     

      接着我们只要按照他的提示--调试步骤设置我们的手机就可以,手机代理设置如图所示:

     

    手机设置完毕代理以后,点击开发者工具页面中的开始调试就可以,很强大,我们选中的页面部分,会在手机上面实时显示出来。(自己体验一下。)

      3-2.如图所示,我们先选择Android设备调试--X5 Blink内核调试,这个功能更强大!

    这一部分强烈建议看一下官网的文档说明,我先copy一下放在这。

    移动调试

    移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:

    (1)准备工作

    1. 安装0.5.0或以上版本的微信 web 开发者工具

    2. 确认移动设备是否支持远程调试功能

      打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。

    3. 打开移动设备中的 USB 调试功能

      1.打开移动设备,进入“设置”->“开发人员选项”

      2.勾选“USB 调试功能”

     

      需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:

      1.打开移动设备,进入“设置”->“关于手机”

      2.找到并单击“内部版本号”7次

    4. 安装移动设备 USB 驱动

      通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用腾讯手机管家来安装设备驱动。

    5. 打开 X5 Blink 内核的 inspector 功能

      打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。

      如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

      

    (2)开始调试

    使用 USB 数据线连接移动设备与 PC 或者 Mac 后,点击打开微信 web 开发者工具“移动调试”tab,选择 X5 Blink 调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。关于 X5 Blink 内核更多信息,可以查看官网介绍

    在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:

    点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:

    点击上图右上角的“手机”图标,将启用屏幕映射功能:

     

     

    下面我来补充一下:

    3-2-1.打开我们手机的调试USB调试功能,我的手机是三星S7,(高版本Android好像都这么弄,如果你的不可以,就问问度娘)找了半天没找到,问了度娘才找到。。。。写个记录

    在下拉通知栏里面选择设置,如图:

                        

    在版本号那里多点击几次,页面就会有提醒,再点击几次就可以打开开发者选项,打开以后,在我们设置里面就出现了开发者选项,点进去,把USB调试打开就好了。

    额外内容----如何关闭开发者选项???如图所示

                    

     

    3-2-2打开 X5 Blink 内核的 inspector 功能

                 打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

     

    3-2-3开始调试

        上面的设置都弄完以后,点击页面的的开始调试按钮,手机上出现下面这个页面,如图,我们点击确定就可以。

     

    然后我们的调试工具就会弹出这个页面:

    此时基本上就可以了,我们在我们的手机上随意打开一个我们要调试的微信公众号的页面。如图

    打开以后如图所示:左侧是我们的调试工具页面,右侧是我们的手机上显示的页面,是不是非常棒,哈哈哈哈,

               

     

    点击调试工具页面右上角的手机图标,可以将手机页面映射到调试工具里面,如图所示:

     转载至  https://www.cnblogs.com/Gabriel-Wei/p/5977850.html      Gabriel-Wei

    展开全文
  • 最近几天没关电脑,发现微信开发者工具非常卡顿,于是重启了一下,这一重启不要紧,打开了好几次都打不开,查看任务管理器,发现有一大堆微信开发者工具的进程,所以程序是运行了,但是界面没打开..上网查了一下,重启系统,重...

    遇到的问题:

    最近几天没关电脑,发现微信开发者工具非常卡顿,于是重启了一下开发者工具,这一重启不要紧,连续好几次都打不开了,查看任务管理器,发现有一大堆微信开发者工具的进程,所以程序是应该运行了,但是界面没打开..上网查了一下,重启系统,重装开发者工具一般是能解决该问题的;在此分享一下我的解决方案,多提供一种思路,多一些参考;

    我是win10的系统,右击开发者工具--属性--兼容性,简单设置了上面两个地方,问题就得以解决;

    展开全文
  • 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,...

    前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正。放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容。下载以后直接安装就好。

    1.下载安装好以后,打开界面是这样的。


    2.我们点击登录,会出现扫描二维码页面,用你自己的微信扫一下登录就可以

      


    3.登录以后,就可以对我们的微信企业号页面进行调试,请注意!!!要想调试当前的企业号页面,你登录的微信号,必须是这个企业号的管理员(这在微信开发者工具的说明文档有写),如果不是,请在你们的企业号开发端把你的微信设置为管理员。否则在开发者工具里面将会出现下面这个页面,如图

     

       管理员设置界面如图:

       

     

    在企业号管理页面添加完毕以后,会在你的手机微信端有提醒,记得按照他的提醒设置一下开发者工具的登陆密码,如果没有设置密码,你依然登陆不上去,如图所示:

     

    设置完密码以后,我们点击登录,发现还是上不去,如图所示:

     

    点进去以后,如图所示:

     

    2.上面所有的都设置过以后,我们登陆开发工具,随意打开一个公众号的页面,复制链接放在开发工具的地址栏,现在基本上就可以在电脑上面进行调试了。页面如图:(关注一下移动调试)

     

    3.这个工具更加强大的功能!点击窗口中的移动调试。

      3-1.如图所示,我们先选择Android设备调试--普通调试,

      

     

     

      接着我们只要按照他的提示--调试步骤设置我们的手机就可以,手机代理设置如图所示:

     

    手机设置完毕代理以后,点击开发者工具页面中的开始调试就可以,很强大,我们选中的页面部分,会在手机上面实时显示出来。(自己体验一下。)

      3-2.如图所示,我们先选择Android设备调试--X5 Blink内核调试,这个功能更强大!

    这一部分强烈建议看一下官网的文档说明,我先copy一下放在这。

    移动调试

    移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:

    (1)准备工作

    1. 安装0.5.0或以上版本的微信 web 开发者工具

    2. 确认移动设备是否支持远程调试功能

      打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。

    3. 打开移动设备中的 USB 调试功能

      1.打开移动设备,进入“设置”->“开发人员选项”

      2.勾选“USB 调试功能”

     

      需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:

      1.打开移动设备,进入“设置”->“关于手机”

      2.找到并单击“内部版本号”7次

    4. 安装移动设备 USB 驱动

      通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用腾讯手机管家来安装设备驱动。

    5. 打开 X5 Blink 内核的 inspector 功能

      打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。

      如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

      

    (2)开始调试

    使用 USB 数据线连接移动设备与 PC 或者 Mac 后,点击打开微信 web 开发者工具“移动调试”tab,选择 X5 Blink 调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。关于 X5 Blink 内核更多信息,可以查看官网介绍

    在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:

    点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:

    点击上图右上角的“手机”图标,将启用屏幕映射功能:

     

     

    下面我来补充一下:

    3-2-1.打开我们手机的调试USB调试功能,我的手机是三星S7,(高版本Android好像都这么弄,如果你的不可以,就问问度娘)找了半天没找到,问了度娘才找到。。。。写个记录

    在下拉通知栏里面选择设置,如图:

                        

    在版本号那里多点击几次,页面就会有提醒,再点击几次就可以打开开发者选项,打开以后,在我们设置里面就出现了开发者选项,点进去,把USB调试打开就好了。

    额外内容----如何关闭开发者选项???如图所示

                    

     

    3-2-2打开 X5 Blink 内核的 inspector 功能

                 打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

     

    3-2-3开始调试

        上面的设置都弄完以后,点击页面的的开始调试按钮,手机上出现下面这个页面,如图,我们点击确定就可以。

     

    然后我们的调试工具就会弹出这个页面:

    此时基本上就可以了,我们在我们的手机上随意打开一个我们要调试的微信公众号的页面。如图

    打开以后如图所示:左侧是我们的调试工具页面,右侧是我们的手机上显示的页面,是不是非常棒,哈哈哈哈,

               

     

    点击调试工具页面右上角的手机图标,可以将手机页面映射到调试工具里面,如图所示:


    这样打开pc端可能出现空白,这时候pc需要翻墙


    展开全文
  • 微信开发最大的特点就是不好调试,所以微信官方退出了一款调试工具! 下载地址: 微信开发者工具项目演示 配置: 我这里是选择 ios 手机代理配置 打开手机选择网络(必须确保手机,电脑在同一局域网下面) 然后点击...
  • 微信开发者工具  做微信公众号的过程中,自然避免不了登录账号然后进行调试,但是在chrome上我们没有办法登录,这是一个令人头疼的问题,比如这个公众号网页,只会提示出错,因为开发者限制了公众号网页的登录...
  • 第八节 在微信开发者工具和手机上测试 虽然游戏能在Cocos Creator引擎的模拟器上正常运行,但这不代表移植到小程序上运行时不会有问题。为确保游戏上线后正常运行,我们必须要在微信开发者工具和手机上都进行测试...
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...
  • UNIAPP打包后,继续添加修改小程序内容,发现微信开发者工具不正常打开 总是提示说登录用户不是该程序的开发者。。一点击确定就跑到微信公众平台。。。我就纳闷了,微信开发者工具都是一直都是登录我的微信,没改变...
  • 按照微信web开发者工具设置手机http代理,用的是iphone8,设置完代理后发现在微信只可以打开http网页,无法打开https网页,咋办?有遇到过的朋友请指点一下,在此谢过!
  • 打开后一直黑屏,登录的码弹框一直黑屏 解决方法 安装路径有中文。大家可以把路径中的中文去掉,换成英文试试。 比如微信开发工具安装的位置是:C:\Program Files (x86)\...启动微信开发者工具后,在项目设置里
  • 自从更新了这个工具“wechat_devtools_1.01.170913_...就是因为分辨率的问题,导致微信调试工具也受到了影响,很多位置是错位的,可以分辨率为1920*1080,同时这个位置设置为100%,就可以了(虽然调到150%比较好,但...
  • 安卓却可以,原先ios真机调试还正常,废了一点点小功夫,终于找到解决的办法,我是更新了下版本就解决了,虽然不知道出现这个问题的原因,但我想应该是微信的锅 ...
  • 其实就按照这上面说的就行。 关键点是在第三部。 配置网络代理时 不能填写http:// 转载于:https://www.cnblogs.com/mchuang/p/6136220.html
  • 微信开发者工具: 当前系统代理不是安全代理? 命令行输入regedit或按快捷键win+R然后输入regedit,打开注册表编辑器------通过下面的路径打开 HKEY_CURRENT_USER/Software/Microsoft/Windows/CurrentVersion/...
  • 使用微信web开发者工具时,有时无论怎样都无法打开,连接超时,微信扫描后一直卡在登录界面 方法1:软件重新安装,系统重启 当遇到这种情况的时候,尝试多次而不得,大多数人的想法就是卸载掉,重新安装一次好了,...
  • npm run build:app-plus (也就是App平台运行调试不支持cli方式,需在HBuilderX中运行调试) //启动项目(支付宝小程序) npm run dev:mp-alipay //启动项目(百度小程序) npm run dev:mp-baidu //启动项目...
  • 它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。 该工具界面主要由几大部分组成,如下图所示: 具体的安装步骤...
  • 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,...
1 2 3 4 5 ... 20
收藏数 10,362
精华内容 4,144