微信开发工具 断点_微信开发工具断点 - CSDN
  • 在上篇已经介绍过下载式了,可到微信小程序开发详细流程 一 (注册小程序及开发工具的下载)查看详细内容 下载地址: 前往开发者工具下载页面 模拟器: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代码

     

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

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

     

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

    展开全文
  • 由于小程序的火爆,于是去开源中国接了个私活,开发...第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”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)

    展开全文
  • 微信小程序断点调试.

    2020-07-29 14:21:49
    微信小程序的断点调试,是相当重要的,因为微信的小程序的调试,本事不是太难。
  • 之前下载了微信开发者工具,最近一直提示下载更新。因为嫌麻烦,就没有更新。结果今天微信开发者工具竟然打不开了!好吧!以后还是经常更新比较好!  遇到了微信开发者工具打不开的问题,就重新下载了最新版的微信...

           之前下载了微信开发者工具,最近一直提示下载更新。因为嫌麻烦,就没有更新。结果今天微信开发者工具竟然打不开了!好吧!以后还是经常更新比较好!

      遇到了微信开发者工具打不开的问题,就重新下载了最新版的微信开发者工具!但是下载完了以后,却发现打不上汉字,我的天呀!网上搜索还是微信开发者工具自身的bug,需要重新启动一下才可以使用。好吧,我又关了重新启动了一下,才可以正常使用。

       经验教训:1.需要经常更新微信开发者工具,别等到有了问题,如打不开,进不去编辑页面,才重新下载!会影响工作效率。不过如果是更新了,依然会出现这个问题,那就只能重新下载了!

           2.重新更新了以后,会出现打不上中文汉字的问题,只能输入英文,输入中文就会闪一下没了。解决方案:关闭微信开发者工具,再重新打开!

    什么时候我写文章也能如此就好了!老话说:“读书破问卷,下笔如有神”,想来我读书还是没有读到位呀!

    展开全文
  • Mpvue的简单介绍以及开发时踩到的一些坑 微信开发者工具不支持打开vue文件,因为微信开发者工具只是一个用户代理(即显示网站用),类似chorme浏览器一样。 由于官方的微信开发者工具编辑mpvue不是很友好,所以编写的...

    Mpvue的简单介绍以及开发时踩到的一些坑

    微信开发者工具不支持打开vue文件,因为微信开发者工具只是一个用户代理(即显示网站用),类似chorme浏览器一样。

    由于官方的微信开发者工具编辑mpvue不是很友好,所以编写的时候一般会选择一款编辑器,可以使用Sublime、webstorm、vs等。

    mpvue小程序项目无法像其他vue项目一样直接打开localhost:8080在浏览器里面预览,而是要在微信开发者工具里面打开预览。

    拿前端最受欢迎的编辑器webstorm来说,将项目导入,对需要进行修改的文件进行修改,然后在微信开发者工具中打开编译后的dist目录就可以看到修改之后的效果了。也可用于页面测试等等。

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

    展开全文
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间...(一)微信开发...
  • 比如:启动本地的开发环境,自己给公众号发送消息,进入后台断点;方法:把本地映射成外网1.本地的tomcat端口号需要是80;2.登录https://www.ngrok.cc/login.html,配置相关信息;3.安装并启动ngrok(根据2中配置好...
  • 由于小程序的火爆,于是去开源中国接了个私活,开发...第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点...
  • Mpvue的简单介绍以及开发时踩到的一些坑 微信开发者工具不支持打开vue文件,因为微信开发者工具只是一个用户代理(即显示网站用),类似chorme浏览器一样。 由于官方的微信开发者工具编辑mpvue不是很友好,所以...
  • 简单的功能做的差不多了,然后打包到微信开发者工具和真机进行调试时发现了一些匪夷所思的问题(也许只是对我来说是这样)。记录一下,以避免以后踩同样的坑。 一、self in not defined 在本地和开发者工具中调试都...
  • 微信小程序开始学习与开发的过程中,总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍...
  • 微信开发工具 设置-安全 服务端口要开启。 当微信开发者工具开启并且实时显示你的界面的时候,就可以调试了。 调试好之后只需要点击"上传",前提是你要在"详情"里输入正确的APPID 域名配置 建议 都用https,迟早都...
  • 微信小程序断点调试

    2018-11-13 10:05:11
    开发总会遇到bug,那么就需要调试,调试一般要么是打log,要么是断点调试,那么在微信小程序怎么断点调试呢?这和我们做Java或者Android 调试还是不一样的,微信小程序调试时先打开调试器,然后在Sources下,如图: ...
  • 估计刚开始玩公众平台的人,都对微信平台怎么断点调试不清楚。因为基本配置的url项的地址,只能是80或443的端口号,并且能映射到外网。起初想用花生壳做映射,只是他提供的端口号是随机的。无奈用不了。 今天看技术...
  • 分享一款微信开发调试的小工具,可以直接VS设置断点,自动跳转到断点
  • 但是其实只要将代码格式化后,代码的可读性还是很高的,而且通过微信开发工具断点调试,一些逻辑还是很容易梳理清楚的。 上图就是通过断点调试找到了最终提交 score 的网络请求 另外问的最多的就是目前小游戏无法...
  • 上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小...
  • 微信开发者工具(一) 一、微信开发者工具基本信息 1.1 微信开发者工具的下载 ​ 直接打开下面网址进行下载: ​ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 1.2 下载以后登录 1.3 ...
  • 微信开发之Curl

    2019-11-28 17:39:11
    微信开发过程当中: 使用开发模式创建微信自定义菜单,需要模拟HTTPS的 POST请求,这里就需要使用PHP的curl函数。 另外好多接口也要用到curl函数,因此curl函数是微信开发的基础,必须熟练掌握。 2.学习内容 1、...
  • 它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。 该工具界面主要由几大部分组成,如下图所示: 具体的安装步骤...
1 2 3 4 5 ... 20
收藏数 4,584
精华内容 1,833
关键字:

微信开发工具 断点