微信开发者工具关掉性能监控_微信开发者工具怎么关闭微信授权 - CSDN
  • https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140 ... 微信手机端调试工具[下载地址] (https://mp.weixin.qq.com/wiki/10/e5f772f4521

    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140


    http://blog.csdn.net/ktutu/article/details/70175979


    微信手机端调试工具[下载地址]

    (https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html
    进入后的页面 
    这里写图片描述 
    这里写图片描述

    注意:

    1.如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。

    2.安装好后,选择移动调试,X5 Blink内核调试,先验证手机是否支持X5 Blink内核调试,如果不支持,找一台支持的手机。 
    这里写图片描述 
    3.翻墙,用usb线连接移动设备与本机,在手机设置里搜索usb调试,打开usb调试功能,用移动设备扫描以上二维码,勾选信息>TBS setting > 是否打开TBS内核 Inspector调试功能,点击开始调试。 
    4.退出微信,从新登录打开微信端的网页后会出现下图(如果未出现,或空白则需要翻墙),点击inspect 
    这里写图片描述 
    5.现在进入了我们熟悉的chrome调试界面

    这里写图片描述


    展开全文
  • 微信小程序开发工具中提供了trace panel工具,利用trace工具可时时监控小程序的性能。分析trace文件可获取内存、CPU、fps、启动时间、各函数的执行时间等。 二、环境搭建 1、电脑上安装adb 2、安装node.js 3、...

    一、Trace工具介绍

    微信小程序开发工具中提供了trace panel工具,利用trace工具可时时监控小程序的性能。分析trace文件可获取内存、CPU、fps、启动时间、各函数的执行时间等。

    二、环境搭建

    1、电脑上安装adb

    2、安装node.js

    3、下载安装微信开发者工具

    三、操作步骤

    1、手机与电脑连接(adb devices 可查看连接的设备),手机USB打开调试模式

    2、登录微信小程序开发者工具,选择trace,点击Choose Device,如果手机adb连接成功在弹框中可看到连接设备,如下:

    3、点击选择设备后会停留在选择trace文件页面,进入到安卓手机小程序的右上角的3个点(...),打开性能监控面板,选择导出Trace数据

     

    4、在Trace panel工具中接着能选择Trace文件

    5、选择trace 文件后可查看所需的性能数据

    四、性能指标说明

     

    展开全文
  • 为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。 使用公众号网页调试,开发者可以调试...

    概览

    为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

    使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK详情

    使用小程序调试,开发者可以完成小程序的API和页面的开发调试、代码查看和编辑、小程序预览和发布等功能

    为了更好的开发体验,我们从视觉、交互、性能等方面对开发者工具进行升级,推出了1.0.0版本
    1
    在原有功能的基础上,新增了两个开发辅助功能:

    使用腾讯云,快速搭建小程序后台运行环境

    申请测试报告,了解小程序在真实的移动设备上运行性能和运行效果。
    1
    1
    注意:因为申请测试会占用测试机器资源,所以一个 APPID 一天只能申请一次测试报告。

    界面

    启动页

    登陆页

    在登录页,可以使用微信扫码登陆开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。
    1

    模式选择

    开发者工具提供两种开发模式的选择。

    公众号网页调试。选择公众号网页调试,将直接进入公众号网页项目调试界面,在地址栏输入 URL,即可调试该网页的微信授权以及微信 JS-SDK 功能

    小程序调试。选择小程序调试,将进入小程序本地项目管理页,可以新建、删除本地的项目,或者选择进入已存在的本地项目。
    1

    新建项目

    当符合以下条件时,可以在本地创建一个小程序项目

    需要一个小程序的 AppID;如没有 AppID,可以选择申请使用测试号

    登录的微信号需要是该AppID 的开发者

    需要选择一个空目录,或者选择的非空目录下存在 app.json 或者 project.config.json。当选择空目录时,可以选择是否在该目录下生成一个简单的项目
    1

    多开项目

    工具支持同时打开多个项目,每次打开项目时会从新窗口打开,入口有以下几种:

    从项目选择页打开项目,处于项目窗口时可以从菜单栏的项目 -> 查看所有项目打开项目选择页

    从菜单栏的最近打开项目列表中打开的项目会从新窗口打开

    新建项目

    命令行或 HTTP 调用工具打开项目

    管理项目

    对本地项目进行删除和批量删除
    1

    主界面

    开发者工具主界面,从上到下,从左到右,分别为:菜单栏、工具栏、模拟器、编辑器、调试器 五大部分
    1

    菜单栏

    微信web开发者工具

    切换账号:快速切换登录用户

    关于:关于开发者工具

    检查更新:检查版本更新

    开发者论坛:前往开发者论坛

    开发者文档:前往开发者文档

    调试:调试开发者工具、调试编辑器;如果遇到疑似开发者工具或者编辑器的 bug,可以打开调试工具查看是否有出错日志,欢迎在论坛上反馈相关问题

    更换开发模式:快速切换公众号网页调试和小程序调试

    退出:退出开发者工具

    项目

    新建项目:快速新建项目

    打开最近:可以查看最近打开的项目列表,并选择是否进入对应项目

    查看所有项目:新窗口打开启动页的项目列表页

    关闭当前项目:关闭当前项目,回到启动页的项目列表页

    文件

    新建文件

    保存

    保存所有

    关闭文件

    编辑:可以查看编辑相关的操作和快捷键
    工具

    编译:编译当前小程序项目

    刷新:与编译的功能一致,由于历史原因保留对应的快捷键 ctrl(⌘) + R

    编译配置:可以选择普通编译或自定义编译条件

    前后台切换:模拟客户端小程序进入后台运行和返回前台的操作

    清除缓存:清除文件缓存、数据缓存、以及授权数据

    界面:控制主界面窗口模块的显示与隐藏

    设置

    外观设置:控制编辑器的配色主题、字体、字号、行距

    编辑设置:控制文件保存的行为,编辑器的表现

    代理设置:选择直连网络、系统代理和手动设置代理

    通知设置:设置是否接受某种类型的通知

    工具栏

    点击用户头像可以打开个人中心,在这里可以便捷的切换用户和查看开发者工具收到的消息
    1
    用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示
    1
    工具栏中间,可以选择普通编译,也可以新建并选择自定义条件进行编译和预览。

    通过切后台按钮,可以模拟小程序进入后台的情况
    1
    工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试。

    工具栏右侧是开发辅助功能的区域,在这里可以上传代码、申请测试、上传腾讯云、查看项目信息
    1

    工具栏管理

    在工具栏上点击鼠标右键,可以打开工具栏管理
    1

    模拟器

    模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。

    开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。1
    在模拟器底部的状态栏,可以直观地看到当前运行小程序的场景值,页面路径及页面参数

    独立窗口

    点击 模拟器/调试器 右上角的按钮可以使用独立窗口显示 模拟器/调试器1
    1

    设置页

    外观设置、编辑设置、代理设置和通知配置。菜单栏上点击设置,或者使用快捷键 ctrl(⌘) + , 可以打开设置页。

    外观设置

    编辑器支持配置外观和代码编辑器习惯和风格。

    主题:深色、浅色 字体 字号 行距
    1

    编辑设置

    修改文件时自动保存 编译时自动保存所有文件 文件保存时自动编译小程序 自动折行 用空格代替Tab 代码缩略图 总是在新标签页打开文件 Git 比较文件内容时,忽略 Windows风格回车符

    Tab大小
    

    如果选中了 “总是在新标签页打开文件”,则在编辑器目录树点击文件时,总是会在一个新标签页中打开此文件,而非在临时标签页中打开。
    1

    代理设置

    可以配置不使用代理,或使用系统代理,或使用自定义代理。
    1

    通知设置

    可以设置是否接收系统消息、开发者社区消息、监控报警消息。
    1

    项目页卡

    项目页卡主要有三大功能

    显示当前项目细节

    包括图标、AppID、第三方平台名(只有第三方平台的开发小程序才会显示)、目录信息、上次提交代码的时间以及代码包大小。

    基础库版本切换

    开发者可以在此选择任意基础库版本,用于开发和调试旧版本兼容问题。
    1

    项目设置

    微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具;三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:

    在 iOS 上,小程序 javascript代码是运行在JavaScriptCore中,是由WKWebView 来渲染的,环境有iOS8、iOS9、iOS10

    在 Android 上,小程序的javascript代码是通过X5 JSCore来解析,是由 X5 基于Mobile Chrome 53/57内核来渲染的

    在开发工具上,小程序的javascript代码是运行在nwjs中,是由Chrome Webview来渲染的

    尽管三端的环境是十分相似的,但是还是有些许区别:

    ES6 语法支持不一致

    wxss 渲染表现不一致。尽管可以通过开启样式补全来规避大部分的问题 ,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

    ES6 转 ES5

    在 0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题

    需要注意的是:为了提高代码质量,在开启 ES6 转换功能的情况下,默认启用 javasctipt 严格模式

    样式补全

    开启此选项,开发工具会自动检测并补全缺失样式,保证在低版本系统上的正常显示。尽管可以规避大部分的问题 ,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

    压缩代码

    开启此选项,开发工具在上传代码时候将会帮助开发者压缩 javascript 代码,减小代码包体积

    不校验请求域名及 TLS 版本

    正式发布的小程序的网络请求是需要校验合法域名以及域名的 TLS 版本,可以在 mp 管理后台进行配置。 在开发过程中可以开启此选项,开发工具将不会校验安全域名以及TLS 版本,帮助在开发过程中更方便的完成调试工作。
    1

    启用多核心编译

    在四核及以上的电脑上此选项可见。启用此选项,会充分利用 CPU 资源来编译项目的 JS 代码,提高编译的效率。可以选择关闭此选项

    域名信息

    将显示小程序的安全域名信息,合法域名可在mp管理后台进行设置。
    1

    腾讯云状态

    使用腾讯云功能,可以在这里看到腾讯云状态、开发环境信息和域名信息。1

    快捷键

    1
    1
    1

    代码编辑

    编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作

    文件格式

    因iOS下仅支持 UTF8 编码格式,最新版本的开发者工具会在上传代码时候对代码文件做一次编码格式校验。

    文件支持

    工具目前提供了 5 种文件的编辑:wxml、wxss、js、json、wxs 以及图片文件的预览。

    文件操作

    新建页面有两种方式

    在目录树上右键,选择新建 Page,将自动生成页面所需要的 wxml、wxss、js、json

    在 app.json 的 pages 字段,添加需要新建的页面的路径,将会自动生成该页面所需要的文件

    自动保存

    编辑代码后,工具会自动帮助用户保存当前的代码编辑状态,直接关闭工具或者切换到别的项目,并不会丢失已经编辑的文件状态,但需要注意的是,只有用户主动保存文件,修改内容才会真实的写到硬盘上。

    如果设置中开启了 “修改文件时自动保存”(设置-编辑设置-修改文件自动保存),工具在修改文件时会自动保存到硬盘中,无需手动保存的效果。

    设置中开启 “编译时自动保存所有文件”(设置-编译设置-编译时自动保存所有文件),在点击编译时自动保存所有文件的效果。

    实时预览

    如果设置中开启了 “文件保存时自动编译小程序”(设置-编辑设置-保存时自动编译小程序),那么当 wxml、wxss、js、json 文件修改时,可以通过模拟器实时预览编辑的情况:

    注意:如果同时开启了 ”修改文件时自动保存“ 的设置,编译动作会有一定的延迟,来避免频繁的编译,手动点击编译按钮将立即编译。

    自动补全

    同大部分编辑器一样,工具提供了较为完善的自动补全

    js 文件编辑会帮助开发补全所有的 API 及相关的注释解释,并提供代码模板支持

    wxml 文件编辑会帮助开发者直接写出相关的标签和标签中的属性

    json 文件编辑会帮助开发者补全相关的配置,并给出实时的提示

    js 补全1
    代码模板支持1
    json 补全1
    wxml 补全1

    Git 状态展示

    如果所在的小程序工程目录(project.config.json 所在目录)存在 Git 仓库,编辑器可以展示目前的 Git 状态。

    目录树

    如图所示,当某些文件存在变动时,目录树的文件右侧将展示相应的图标来表明这一状态。当某一处于收起状态的目录下存在有变动的文件时,此目录的右侧亦会展示一个圆点图标表明此情况。

    文件图标状态的含义如下:1

    图标 含义
    U 文件未追踪(Untracked)
    A 新文件(Added, Staged)
    M 文件有修改(Modified)
    +M 文件有修改(Modified, Staged)
    C 文件有冲突(Conflict)
    D 文件被删除(Deleted)

    文件夹目录图标状态的含义如下:

    图标 含义
    小红点 目录下至少存在一个删除状态的文件
    小橙点 目录下至少存在一个冲突状态的文件
    小蓝点 目录下至少存在一个未追踪状态的文件
    小绿点 目录下至少存在一个修改状态的文件

    如果某一文件存在修改(Modified),可以右键点击此文件,并选择 “与上一版本比较”,则可以查看当前工作区文件与 HEAD 版本的比较。11

    文件编辑

    存在Git仓库时,状态栏会展示此Git仓库目前的分支信息。例如,下图表明目前Git仓库处于v2分支。1
    同时,编辑文件内容时,将会在所编辑代码左侧实时显示相对于上一版本内容的比较1
    样式说明如下:

    文件夹目录图标状态的含义如下:

    样式 含义
    蓝色线条 此处的代码有变动
    绿色线条 此处的代码是新增的
    红色三角箭头 此处有代码被删除

    Windows 风格回车设置

    如需忽略 Windows 风格的回车符,可以前往 “设置” - “编辑”,并勾选 “Git 比较文件内容时,忽略 Windows 风格回车符”。勾选后,在编辑文件进行内容比较时,所有 Windows 风格的回车符将被当作 Unix 风格的回车符对待。

    项目配置文件

    可以在项目根目录使用 project.config.json 文件对项目进行配置。

    字段名 类型 说明
    miniprogramRoot Path String 指定小程序源码的目录(需为相对路径)
    qcloudRoot Path String 指定腾讯云项目的目录(需为相对路径)
    pluginRoot Path String 指定插件项目的目录(需为相对路径)
    compileType String 编译类型
    setting Object 项目设置
    libVersion String 基础库版本
    appid String 项目的 appid,只在新建项目时读取
    projectname String 项目名字,只在新建项目时读取
    packOptions Object 打包配置选项
    scripts Object 自定义预处理

    compileType 有效值

    名字 说明
    miniprogram 当前为普通小程序项目
    plugin 当前为小程序插件项目

    setting 中可以指定以下设置

    字段名 类型 说明
    es6 Boolean 是否启用 es6 转 es5
    postcss Boolean 上传代码时样式是否自动补全
    minified Boolean 上传代码时是否自动压缩
    urlCheck Boolean 是否检查安全域名和 TLS 版本

    scripts 中指定自定义预处理的命令

    名字 说明
    beforeCompile 编译前预处理命令
    beforePreview 预览前预处理命令
    beforeUpload 上传前预处理命令

    packOptions

    packOptions 用以配置项目在打包过程中的选项。打包是预览 、上传时对项目进行的必须步骤。

    目前可以指定 packOptions.ignore 字段,用以配置打包时对符合指定规则的文件或文件夹进行忽略,以跳过打包的过程,这些文件或文件夹将不会出现在预览或上传的结果内。

    packOptions.ignore 为一对象数组,对象元素类型如下:

    字段名 类型 说明
    value string 路径或取值
    type string 类型

    其中,type 可以取的值为 folder、file、suffix、prefix,分别对应文件夹、文件、后缀、前缀。示例配置如下。

    {
      "packOptions": {
        "ignore": [{
          "type": "file",
          "value": "test/test.js"
        }, {
          "type": "folder",
          "value": "test"
        }, {
          "type": "suffix",
          "value": ".webp"
        }, {
          "type": "prefix",
          "value": "test-"
        }]
      }
    }

    注: value 字段的值不支持通配符、正则表达式。若表示文件或文件夹路径,以小程序目录 (miniprogramRoot) 为根目录。

    项目配置示例:

    {
      "miniprogramRoot": "./src",
      "qcloudRoot": "./svr",
      "setting": {
        "postcss": true,
        "es6": true,
        "minified": true,
        "urlCheck": false
      },
      "packOptions": {}
    }

    小程序调试

    程序调试主要有三大功能区:模拟器、调试工具和小程序操作区

    模拟器

    模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。1

    自定义编译

    点击工具栏中的编译按钮或者使用快捷键 Ctrl(⌘) + B,可以编译当前代码,并自动刷新模拟器。

    同时为了帮助开发者调试从不同场景值进入具体的页面,开发者可以添加或选择已有的自定义编译条件进行编译和代码预览(如图)。

    注:编译条件跟项目相关,每个项目可以保存自己相关的编译条件1

    编译异常信息

    在预览或上传的过程中,可能会出现编译异常信息。1
    忽略上传的文件:在项目文件夹下,某些文件可能不是小程序运行所需的,例如 readme 文档、.gitignore 文件等。为了优化大小,在预览和上传的过程中,这些文件将不会被打包。

    体积过大的文件:如果勾选了 ES6 转 ES5 或代码压缩的选项,为了优化编译速度,对于某些体积很大的 JS 文件,工具会跳过对这些文件的处理。

    自定义预处理

    1
    在项目设置页卡,我们提供了以下几个默认的预处理,可以解决大部分的代码文件预处理的问题

    ES6 转 ES5(可以应用于编译、预览、上传),使用 "babel-core": "^6.26.0"

    上传代码时样式自动补全,使用 "postcss": "^6.0.1"

    上传代码时自动压缩,使用 "uglify-js": "3.0.27"

    对于高级开发者来说,完全可以自己编写自动化构建脚本对代码文件进行预处理,所以我们提供了 启用自定义处理命令 选项 开发者可以指定 编译前/预览前/上传前 需要预处理的命令 开发者工具使用 shell 的方式运行指定的命令,并在控制台中输出命令的执行日志

    预处理命令的执行顺序

    自定义预处理命令 --- 默认预处理命令 --- 编译/预览/上传

    注:编译前预处理命令,需要手动点击 "编译" 按钮,或者使用快捷键编译才能触发。文件修改无法触发该命令。

    Mac 版本的开发者工具无法复用 bash 中的 Path 环境变量。可能需要手动设置系统的 Path 环境变量,才能正常执行命令。

    前后台切换

    工具栏中前后台切换帮助开发者模拟一些客户端的环境操作。例如当用户从小程序中回到聊天窗口,会触发一个小程序被设置为后台的回调。1

    调试工具

    调试工具分为 7 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

    Wxml panel

    Wxml panel 用于帮助开发者开发 wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况(仅为实时预览,无法保存到文件)。通过调试模块左上角的选择器,还可以快速定位页面中组件对应的 wxml 代码。1

    Sources panel

    Sources panel 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。1
    注:当代码运行到断点的时候,整个小程序都停止了,所以模拟器会出现白屏或者无法操作的情况

    AppData panel

    AppData panel 用于显示当前项目运行时小程序 AppData 具体数据,实时地反映项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。1

    Storage panel

    Storage panel 用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。

    可以直接在 Storage panel 上对数据进行删除(按 delete 键)、新增、修改1

    Network panel

    Network Panel 用于观察和显示 request 和 socket 的请求情况1
    注:uploadFile 和 downloadFile 暂时不支持在 Network Panel 中查看

    Console panel

    Console panel 有两大功能:

    1.开发者可以在此输入和调试代码1
    2.小程序的错误输出,会显示在此处1
    在控制台中可以输入以下命令

    build: 编译小程序

    preview: 预览

    upload: 上传代码

    openVendor: 打开基础库所在目录

    openToolsLog: 打开工具日志目录

    checkProxy(url): 检查指定 url 的代理使用情况

    Sensor panel

    Sensor panel 有两大功能:

    1.开发者可以在这里选择模拟地理位置1
    2.开发可以在这里模拟移动设备表现,用于调试重力感应 API1

    自定义数据上报

    开发者工具上可以编辑和调试自定义分析的数据上报功能,点击菜单栏中的 “工具 - 自定义分析” 即可弹窗打开自定义分析:1
    在页面中可以新建、查看或修改事件,在修改事件的页面中编辑完毕后,点击底部的保存并测试按钮将保存当前配置,同时工具将在调试器上提示收到最新配置,并展示配置信息,展示的内容包括事件的 ID 和名称,以及每个动作的触发条件和上报数据:11
    接着可以在模拟器中操作和触发事件。在模拟器中刷新小程序也将获取该测试配置,除非窗口被关闭。窗口关闭后模拟器不会再收到配置。当事件被触发上报时,工具上会展示上报信息,包括事件 ID、触发页面、触发方式、触发时动作、以及上报的字段值和数据:1
    同时可以在窗口中点击 “同步结果” 会同步显示上报的数据:1
    关闭窗口后,配置将全部失效,模拟器不再收到配置并不再触发上报(小程序中使用 wx.reportAnalytics API 进行的数据上报仍会在工具中输出)。 测试成功后,可到小程序后台发布事件配置,即可正式生效收集所定义的事件数据。

    自动预览

    自动预览可以实现编写小程序时快速预览,免去了每次查看小程序效果时都要扫码或者使用小程序开发助手的麻烦。只需按下快捷键,保持前台运行的微信即可自动唤出或刷新小程序。要使用自动预览功能,需要配合 6.6.7 及以上的微信客户端版本。1
    要开始使用 “自动预览” 功能,可以在打开预览二维码的时候,点击 “自动预览” 标签以切换到自动预览模式。切换到自动预览模式后,只需按下预览快捷键,或者点击浮窗上的 “编译并预览” 按钮,即可触发自动预览。此时工具会上传代码,保持前台运行的微信客户端会自动刷新当前开发的小程序。

    当自动预览成功时,工具栏上的预览图标会显示为一个绿勾。如果预览出错,则会显示为一个红色惊叹号,可以点击查看详情。

    注意,自动预览功能仅限与登陆开发者工具的同账号微信使用。如需换回普通预览模式,只需要点击 “扫描二维码预览” 标签即可。

    用户可以在快捷键设置里自定义预览快捷键。1

    特殊场景调试

    小程序开发者工具是对微信客户端的模拟,受限于桌面设备同移动设备的差异,以及微信的一些特有数据,同时考虑到开发的便捷性,部分 API 在工具和微信中有所不同。

    扫码接口

    同手机端直接调用摄像头来扫码不同,在 PC 或者 Mac 上调用摄像头来扫码完成调试是一个低效的行为,所以在开发工具上调用二维码扫码 API 后,开发者可以选择一个本地的图片来进行后续的逻辑调试,而不是真正的启用摄像头来扫码,流程有所不同,但是接口的输入和输出是一致的。

    微信支付

    最新版本的开发者工具已经支持微信支付的调试,但是为了兼顾到安全,同手机上直接调用微信支付有所不同:

    新绑定的开发者需要 24 小时后才有权限进行微信支付的调试
    开发者在工具上调用微信支付的 API 后,开发工具会出现一个二维码,开发者必须使用当前开发所使用的微信号扫码后在手机上完成支付的流程;工具会同步移动端微信支付的回包到工具中,开发者自行进行后续的操作;使用的交互有所不同,但是接口的输入输出工具同客户端是保持一致的。

    启动使用自定义参数

    在日常使用中,用户可以通过扫码、分享打开一个小程序,这时候会依据设置的启动页面:path 跳转到对应的小程序页面(不一定是首页)并且可以携带参数:query。在开发者工具中,开发者同样可以通过自定义编译条件的方式来达到调试不同启动页面和启动参数的目的。

    例如下图是选择进入页面是 page/API/index,参数 是 name=can1

    进入场景值

    在微信客户端中,用户可能在各个场景下打开小程序 详情 ,然而在开发者工具中是没有真实的环境去模拟这些场景的。开发者可以通过条件编译的方式来达到调试不同场景的目的1

    普通的转发

    开发者工具上调用转发是一个模拟的行为,并不会真实的转发给用户,开发可以通过这个模拟行为判断是否正确的调用了转发 API。

    带 shareTicket 的转发
    带 shareTicket 的转发可以获取到更多的转发信息,例如群聊的名称以及群的标识 openGId。在小程序开发者工具上,开发者可以通过以下方式来调试带 shareTicket 的转发。

    调用 wx.showShareMenu 的参数 withShareTicket 为 true 时,点击模拟器右上角菜单后出现的转发按钮,会出现一个测试群列表,如图:1
    开发者点击选取任何一个群,可以通过接口的回包获取到 shareTicket ,通过调用 wx.getShareInfo 可以获取到相关转发的信息

    当开发者需要调试从某一个群点开,并且带有 shareTicket 的场景时,可以使用自定义编译中的 1044:群聊会话中的小程序消息卡片(带 shareTicket) 同时可以选择任一模拟测试群,如图1

    预览使用自定义编译条件

    同 启动使用自定义参数 相同,提交预览时,开发者可以通过自定义预览的方式来达到在移动设备上调试不同启动页面和启动参数 的目的。我们可以选择已经创建好的自定义编译条件进行预览。

    跳转小程序调试支持

    小程序跳转开发调试可以分为两个部分

    1.调试小程序是否能够正确的跳转

    出于小程序代码的安全考虑,在工具上调用 wx.navigateToMiniProgram 的时候,开发者工具不会真实的打开和跳转到另外的小程序,但是工具会判断当前小程序与需要跳转的小程序之间的绑定关系,输出相关信息给到开发者。开发者可以根据成功或者失败的回调函数来判断调用是否成功。

    2.调试被打开的小程序时候正确的接收参数

    选择 自定义编译 进入场景选择 1037 从小程序进入 可以调试小程序被打开时候是否接收到了正确的参数并做了相关处理。1
    选择 自定义编译 进入场景选择 1038 从小程序返回 可以调试小程序返回时候是否接收到了正确的参数并做了相关处理。1

    真机调试

    功能概述

    真机远程调试功能可以实现直接利用开发者工具,通过网络连接,对手机上运行的小程序进行调试,帮助开发者更好的定位和查找在手机上出现的问题。

    调试流程

    要发起一个真机远程调试流程,需要先点击开发者工具的工具栏上 “远程调试” 按钮。1
    此时,工具会将本地代码进行处理打包并上传,就绪之后,使用手机客户端扫描二维码即可弹出调试窗口,开始远程调试。

    远程调试窗口

    使用手机扫描此二维码,即可开始远程调试。

    要结束调试,直接关闭此调试窗口,或点击右下角 “结束调试” 按钮即可。1
    远程调试窗口分为两部分,分别是左侧的调试器视图、右侧的信息视图。开发者可以在调试器里直接进行代码的调试,并查看 Storage 情况;信息视图则可以查看目前与手机和服务器的连接情况,以及发生的错误信息等。

    调试器

    在远程调试的调试器里,开发者可以在 Console 面板里对代码进行调试,在 Sources 面板里查看小程序的源代码并进行断点单步调试,在 Storage 面板里查看小程序的 Storage 使用情况等。1
    注意,要在 Console 里对小程序进行调试,需要将调试的上下文切换到 VM Context 1,如图所示1
    在 Sources 面板查看源代码时,开发者所有的文件路径都是以 weapp:// 开头的1
    除了可以在调试器进行单步调试,开发者还能在代码中手动插入 debugger; 语句进行断点调试。因此,如果想要在小程序启动的尽早时刻断点,可以在进入远程调试之前,编辑代码手动在需要断点处的代码插入 debugger; 语句来实现。

    WXML、AppData、Storage 面板的操作和开发者工具调试模拟器时的操作一致。注意,如果在右侧信息视图取消勾选了 “使用工具端的 Storage”,则所有的 Storage 数据将被存储在手机上,将不再出现 Storage 面板。111

    信息视图

    1
    上面的信息视图展示了手机、网络连接的信息。手机信息展示手机的型号、系统、名称、微信版本等信息,以及通信延时。通信延时越小,与手机的通信越流畅。

    在 “连接信息” 里,展示了工具与服务器的连接信息,包括了连接状态、服务器状态等,当连接故障、服务器阻塞影响到调试的过程和流畅度时,此处将展示这一状态。当连接状态为 “已结束” 时,表明调试已被终止。

    “警告和错误” 展示了最近发生的错误和警告信息。如果网络连接断开,此处将会询问开发者是否需要重新连接。

    手机端展示

    调试过程中的手机端展示如下所示。

    当手机无网络或者进入了断点状态时,将会出现一个浮层提示并阻止进一步的操作。
    1

    命令行调试

    开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。

    命令行

    通过命令行调用安装完成的工具可执行文件,完成登录、预览、上传、自动化测试等操作。调用返回码为 0 时代表正常,为 -1 时错误。

    命令行工具所在位置:

    macOS: <安装路径>/Contents/Resources/app.nw/bin/cli

    Windows: <安装路径>/cli.bat

    1. 命令行启动工具

    -o, --open [projectpath]: 打开工具,如果不带 projectpath,只是打开工具。如果带 project path,则打开路径中的项目,每次执行都会自动编译刷新,并且自动打开模拟器和调试器。projectpath 不能是相对路径。项目路径中必须含正确格式的 project.config.json 且其中有 appid 和 projectname 字段。

    示例:

    cli -o //打开工具
    cli -o /Users/username/demo //打开路径 /Users/username/demo 下的项目
    1. 命令行登录

    命令行提供两种登录方式:一是将登录二维码转成 base64 给用户,让用户自己集成到自己系统中使用;二是将二维码打印在命令行中。

    -l, --login: 启动登录逻辑。

    --login-qr-output [format[@path]]: 指定二维码输出形式,format 可选值包括 terminal(命令行输出), base64, image。如果有填 path,表示结果输出到指定路径的文件中。如果没填 path,表示将结果输出到命令行。不使用此选项或使用了但没有填 format 的话则默认为命令行打印。

    示例:

    cli -l  //登录,在终端中打印登录二维码
    cli -l --login-qr-output base64  //登录,在终端中打印登录 base64 形式的二维码 
    cli -l --login-qr-output base64@/Users/username/code.txt  //# 登录,二维码转成 base64 并存到文件 /Users/username/code.txt
    1. 命令行提交预览

    预览时必须处于登录状态,如果没有登录,会提示需先登录。预览的二维码可命令行打印也可以转成 base64。ES6 等项目配置从 project.config.json 读。

    -p, --preview : 预览代码,project_root 指定项目根路径。

    --preview-qr-output [format[@path]]: 指定二维码输出形式,语义同登录用的选项 --login-qr-output。

    示例:

    cli -p /Users/username/demo  //预览,在终端中打印登录二维码
    cli -p /Users/username/demo --preview-qr-output base64@/Users/username/code.txt // 预览,二维码转成 base64 并存到文件 /Users/username/code.txt
    1. 命令行上传代码

    上传代码时必须处于登录状态,如果没有登录,会提示需先登录。

    上传代码需要的信息包括项目根目录、版本号、以及可选的版本备注。

    -u, --upload : 上传代码,version 指定版本号,project_root 指定项目根路径。

    --upload-desc : 上传代码时的备注。

    示例:

    cli -u 1.0.0@/Users/username/demo --upload-desc 'initial release' //上传路径 /Users/username/demo 下的项目,指定版本号为 1.0.0,版本备注为 initial release
    1. 支持自动化测试
      -t, --test : 提交自动化测试,project_root 指定项目根路径。

    示例:

    cli -t /Users/username/demo   //提交测试路径 /Users/username/demo 下的项目

    测试号

    为方便开发者开发和体验小程序、小游戏的各种能力,开发者可以申请小程序或小游戏的测试号,并使用此帐号在开发者工具创建项目进行开发测试,以及真机预览体验。

    申请测试号

    申请测试号的过程非常简单。只需访问 申请地址 ,并扫码登录后,即可查看到已为自己分配好的测试帐号信息。1

    创建测试号项目

    在得到了测试号的帐号信息之后,可以在开发者工具中使用此帐号信息创建项目进行开发。1
    如图所示,打开工具并新建一个小程序项目,填入测试帐号的 appid,即可创建测试项目。1
    如果需要跳过网络请求域名的校验,可勾选项目设置里的 “不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书” 选项。

    点击工具栏上的预览按钮即可在真机上预览体验。在真机上如需跳过网络请求域名的校验,需要点击右上角选项,选择 “打开调试” 即可。1

    http调用

    开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作

    HTTP

    http 服务在工具启动后自动开启,HTTP 服务端口号在用户目录下记录,可通过检查用户目录、检查用户目录下是否有端口文件及尝试连接来判断工具是否安装/启动。

    端口号文件位置:

    macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide

    Windows : ~/AppData/Local/微信web开发者工具/User Data/Default/.ide

    打开工具或指定项目

    接口定义:URL: /open HTTP 方法: GET

    URL参数 必填 说明
    projectpath 打开指定路径中的项目。如项目已打开,自动刷新项目。如项目未创建,自动创建并打开项目

    示例:

    http://127.0.0.1:端口号/open   //打开工具
    http://127.0.0.1:端口号/open?projectpath=项目全路径  //打开/刷新项目

    注意:

    项目路径中必须含正确格式的 project.config.json 且其中有 appid 和 projectname 字段

    项目路径需经 URL encode

    登录

    接口定义:URL:/login HTTP 方法:GET

    URL参数 必填 说明
    format 指定登录二维码返回格式,可选值有 image、base64、terminal,默认 image。图片格式为 png
    qroutput 指定文件路径,在文件写入二维码数据。如指定,二维码将被写入指定路径的文件内,如未指定,二维码将作为请求相应体返回

    示例:

    http://127.0.0.1:端口号/login   //登录,返回图片格式的二维码
    http://127.0.0.1:端口号/login?format=base64 //登录,取 base64 格式二维码
    http://127.0.0.1:端口号/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt   //登录,取 base64 格式二维码,并写入 /Users/username/logincode.txt

    预览

    接口定义:URL:/preview HTTP 方法:GET

    URL参数 必填 说明
    projectpath 预览指定路径中的项目。如项目已打开,自动刷新项目。如项目未创建,自动创建并预览项目
    format 指定登录二维码返回格式,可选值有 image、base64、terminal,默认 image。图片格式为 png
    qroutput 指定文件路径,在文件写入二维码数据。如指定,二维码将被写入指定路径的文件内,如未指定,二维码将作为请求相应体返回

    示例:

    http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo     //预览路径为 /Users/username/demo 的项目,返回图片格式的二维码
    http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64     //预览路径为 /Users/username/demo 的项目,返回 base64 格式的二维码
    http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt     //预览路径为 /Users/username/demo 的项目,返回 base64 格式的二维码,并写入 /Users/username/logincode.txt

    上传

    接口定义:URL:/upload HTTP 方法:GET

    URL参数 必填 说明
    projectpath 上传指定路径中的项目
    version 版本号
    desc 本次上传的版本备注

    示例:

    http://127.0.0.1:端口号/upload?projectpath=%2FUsers%2Fusername%2Fdemo&version=v1.0.0     //上传路径为 /Users/username/demo 的项目,指定版本号为 v1.0.0
    http://127.0.0.1:端口号/upload?projectpath=%2FUsers%2Fusername%2Fdemo&version=v1.0.0&desc=test     //上传路径为 /Users/username/demo 的项目,指定版本号为 v1.0.0,并带上备注

    自动化测试

    接口定义:URL:/test HTTP 方法:GET

    URL参数 必填 说明
    projectpath 测试指定路径中的项目

    示例:

    http://127.0.0.1:端口号/test?projectpath=%2FUsers%2Fusername%2Fdemo   //提交路径为 /Users/username/demo 的项目进行测试

    请求响应:正常情况下 HTTP 相应状态码为 200,错误时 400,返回如下格式的 JSON 字符串:

    {
      "code": 40000,
      "error": "原因"
    }

    小程序开发助手

    功能概述

    “小程序开发助手” 是微信公众平台发布的官方小程序,帮助开发和运营人员在手机端更方便快捷地查看和预览小程序,扫描下面小程序码可立即体验1
    使用者可以在小程序开发助手查看和预览与自己关联的所有小程序。小程序将会按照其更新时间自动排序,显示在最上面的小程序是最近有提交的小程序,例如开发者预览了新的代码,或者体验版有更新1
    通过点击并展开小程序列表,使用者可以根据自己的身份,浏览到小程序的线上版本、体验版本或开发版本。如果使用者是小程序的管理者,可以浏览到全部三种版本;如果使用者身份是 “体验者”,则可以浏览到线上版本、体验版本,而不会浏览到任何开发版本;如果一个小程序有多个开发者,则开发版本的列表将会显示每一个开发者提交预览的最新版本。1
    如图,小程序的开发版和体验版会展示提交/发布者、更新时间,以及代码的编译前后大小。

    通过点击列表上的相应版本,使用者可以立即预览该版本对应的小程序。点击导航栏的返回,可以返回到小程序开发助手,预览其他版本的小程序

    代码片段

    代码片段是一种可分享的小项目,可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题等等。分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段。如果网页可点击的链接指向的是分享链接,那么点击链接也会自动打开工具进入代码片段导入页。使用最新版的开发者工具可以点此体验导入代码片段。

    创建代码片段

    在工具选择项目的界面中,右侧可以选择代码片段页卡,查看所有本地代码片段,在右下角可以点击创建代码片段。1
    创建代码片段需要填入代码片段名称、本地存放目录。AppID 不是必填项,如果需要演示依赖 AppID 的操作则需填写。如果存放目录是空目录,则可在下方选择小程序、小游戏等的快速启动模板1
    信息填写正确后,点击创建即可完成创建并打开代码片段。

    代码片段主界面

    代码片段的主界面与普通项目主要有以下几点区别:

    1.没有上传、腾讯云和申请测试报告等功能

    2.详情页中会展示上次分享的链接,并可以一键复制

    3.代码片段的快速启动模板与普通项目的快速启动模板不同,体积更小,功能更精简1

    分享代码片段

    在工具栏上点击分享按钮即可开启分享代码片段的流程,在分享信息中需要填写以下内容:

    1.项目描述:简要介绍此代码片段的功能和目的

    2.是否需要 AppID:如果是,开发者导入代码片段时会建议其填入 AppID 以完整运行代码片段

    3.最低库版本:开发者打开导入的代码片段时详情页的调试基础库不会低于指定的版本

    4.分享的小程序代码片段最大大小为 100KB,小游戏代码片段最大为 200KB。1
    分享成功后会展示分享链接,可复制分享给其他开发者,其他开发者在工具中选择导入代码片段并粘贴链接即可导入1
    分享的链接除了可以粘贴到导入页导入外,还可以设置为可点击的链接。如果 html 标签的 href 属性设置为分享的链接,如 代码片段示例,则用户点击此链接时会自动打开工具进入代码片段导入页,最后点击导入即可完成导入。在开发者社区发帖时,如果想要提供 demo 示例,如果想要提供 demo 示例,可以插入一个链接为代码片段分享链接的超链接1

    导入代码片段

    在选择代码片段的页面的右下角可以点击导入进入导入页,或者点击菜单栏上的项目选项卡下的导入代码片段来打开导入页。导入时需要填写分享链接或代码片段 ID。链接的最后一部分即是代码片段的 ID,如 wechatide://minicode/76b799966b6ead1837edac517cc02e02 的 ID 为 76b799966b6ead1837edac517cc02e02。1
    导入时可选择存放目录和 AppID。存放目录默认是在临时文件夹1

    第三方平台

    概述

    小程序运营者,可以一键授权给第三方平台,通过第三方平台来完成业务。第三方平台在小程序的前后端开发上同直接开发小程序有所区别,其所拥有的各项 API 以及详细说明请查看 代小程序实现业务 ,其余部分请阅读下文。

    开发第三方平台小程序具有一定的复杂性,首先需要确认三个概念:

    open3rd:第三方平台,是小程序官方认可的第三方开发商 详情

    3rdMiniProgramAppid:第三方平台申请的并绑定在该平台上的小程序,用于开发小程序模板

    extAppid:授权给第三方平台的小程序

    第三方平台相关的小程序开发需要做一些特殊的处理:

    小程序模板的开发

    小程序模板结合 extAppid 的开发调试

    使用 directCommit 直接提交至待审核列表 详情

    最新版本的开发工具支持第三方平台小程序的开发和预览。

    创建项目

    与开发普通小程序一致,第三方平台开发者填入相关的 3rdMiniProgramAppid ,设定项目名称和选择项目目录即可创建项目。

    对于第三方平台小程序,可以在项目页卡查看到相关的 open3rd 信息以及当前的第三方的 3rdMiniProgramAppid ,如若项目配置了相关的 extAppid ,那么项目页卡中也会有相关信息。1

    小程序模板开发

    与开发普通小程序一致,开发者在开发工具上开发好相关的业务逻辑之后,在项目页卡中提交预览既可以在微信中查看小程序的真实表现。

    有所不同的是,第三方平台小程序的提交上传是上传至该第三方平台的 open 帐号下的模板草稿箱中,该平台的管理员需要自行对该模板进行相应的设置,更多请参考 开放平台的文档 。

    extAppid 的开发调试

    为了方便第三方平台的开发者引入 extAppid 的开发调试工作,需要引入 ext.json 的概念。

    ext.json 是一个配置文件,放置在小程序项目的根目录下。

    以下是一个包含了所有配置选项的 ext.json :

    {
      "extEnable": true,
      "extAppid": "wxf9c4501a76931b33",
      "directCommit": false,
      "ext": {
        "name": "wechat",
        "attr": {
          "host": "open.weixin.qq.com",
          "users": [
            "user_1",
            "user_2"
          ]
        }
      },
      "extPages": {
        "pages/logs/logs": {
          "navigationBarTitleText": "logs"
        }
      },
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Demo",
        "navigationBarTextStyle":"black"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      }
    }

    ext.json中的配置字段分为两种

    特有的字段

    同 app.json 相同的字段

    属性 类型 必填 描述
    extEnable Boolean 配置 ext.json 是否生效
    extAppid String 配置 extAppid
    ext Object 开发自定义的数据字段
    extPages String Array 单独设置每个页面的 json
    directCommit Boolean 是否直接提交到待审核列表
    extEnable

    extEnable 是一个 Boolean 类型的字段,用于规定当前的 ext.json 文件是否生效,开发者可以通过修改这个字段来开启和关闭 extAppid 的结合开发。

    extAppid

    extAppid 是授权调试的 AppID ,例如开发者在此处填写的是 wxf9c4501a76931b33 那么在 extEnable 为真的情况下,后续的开发逻辑都会基于 wxf9c4501a76931b33 来运行。

    3 ext

    ext 字段是开发自定义的数据字段,在小程序中可以通过 wx.getExtConfigSync 或者 wx.getExtConfig 获取到这些配置信息。

    例如上面的例子中,通过 wx.getExtConfigSync 就可以获得 ext 字段的所有配置

    {
      "name": "wechat",
      "attr": {
        "host": "open.weixin.qq.com",
        "users": [
          "user_1",
          "user_2"
        ]
      }
    }
    extPages

    extPages 是一个对象,对象中的每个 key 应该是该小程序模板 app.json 中定义的页面,每个 key 对应的 value 是 page.json 中所规定的各项配置。

    当开发者设置这个配置以后,小程序框架会对应的修改相对应的 page 的配置信息。

    directCommit

    directCommit 是一个 Boolean 类型的字段,用于规定当前的上传操作是否是直接上传到 extAppid 的审核列表中。

    当 directCommit 为 true 真时,开发者在工具中的上传操作,会直接上传到对应的 extAppid 的审核列表,第三方平台只需要调用 https://api.weixin.qq.com/wxa/submit_audit?access_token=TOKEN 既可以提交审核。更多请参考 第三方平台文档

    当 directCommit 为 false 或者没有定义时,开发者在工具中的上传操作,会直接上传到对应的草稿箱中。

    tips: 可以使用工具的命令行接口 或者 http 接口来实现自动化的代码提交审核

    同 app.json 相同的字段

    当 ext.json 中的字段同 app.json 中一致时,ext.json 的字段会覆盖 app.json 中的对应字段,例如以下的 ext.json

    {
      ········
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "ext navigationBarTitleText",
        "navigationBarTextStyle":"black"
      }
    }

    那么该小程序最终的 navigationBarTitleText 应该是 ext navigationBarTitleText

    展开全文
  • 小程序异常监控工具

    2019-07-04 08:38:07
    一种轻量级的微信小程序日志监控的方法 今天一个活动要写个H5,明天一个功能要用小程序,天天都在写bug。用户反馈小程序用起来有问题还特么还不知道到底出了啥bug,反馈多了,老板要扣工资了!看来挖了太多坑不填也...

    一种轻量级的微信小程序日志监控的方法

    小编推荐: Fundebug提供JS、微信小程序、微信小游戏,Node.js和Java错误监控。真的是一个很好用的错误监控服务,众多大佬公司都在使用。

    今天一个活动要写个H5,明天一个功能要用小程序,天天都在写bug。用户反馈小程序用起来有问题还特么还不知道到底出了啥bug,反馈多了,老板要扣工资了!看来挖了太多坑不填也不行,程序异常还是要主动追踪,今天给大家介绍一个轻量级的错误日志监控服务Fundebug

    Fundebug的小程序监控插件接入简单,只需要下载相应的插件文件,然后在app.js文件中引入并配置apikey即可。唯一要注意的就是微信需要设置request合法域名这一点不能忘记了。

    1. 创建微信小程序监控项目

    需要注册账号,点击创建团队

    这里写图片描述

    2. 下载并配置apikey

    这里写图片描述

    3. 测试

    我参照官方文档,造了一个测试错误:

    这里写图片描述

    果然,立即收到了报错,控制台多出了一个小红点:

    这里写图片描述

    而且,值得点赞的是,在浏览器上方的tab标签中也有小红点。也就是说,即使你在用查看其它网站的信息的时候,也能及时知晓报错。

    这里写图片描述

    然后,在Fundebug的控制台就可以看到详细的错误信息了

    这里写图片描述

    而且,这些报错会聚合起来。你可以很容易看出一个错误出现了多少次,影响了多少用户,由此来判断错误的严重程度,决定要不要立即去改这个bug。

    这里写图片描述

    4. 个性化配置

    Fundebug的微信小程序插件默认只会抓取错误信息,也就是说,连系统和设备信息都不会获取,除非你去配置。然后,你会发现他有一大堆可以配置的属性,可以说是很全面很到位了。

    这里写图片描述

    我试着做了一下基本的配置,然后就可以抓到系统信息。

    这里写图片描述

    并且连函数的调用都记录下来了,这个对于解bug可以说是非常有用了。

    这里写图片描述

    结论

    一个轻量级的bug监控插件,做到了非轻量级的服务。Fundebug有免费的版本,每个月免费的额度是3000个错误事件,对于个人开发者也算够用。

    关于Fundebug

    Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

    您可能感兴趣的

    展开全文
  • F 修复 删除用户数据目录后开发者工具启动不了的问题 F 修复 未使用体验评分时存在内存泄漏的情况 F 修复 切换页面偶现 WXML 面板内容丢失问题 反馈详情 F 修复 调试 WXML 面板 rpx 计算错误导致样式错乱的问题 ...
  • 由于微信个人订阅号目前很多功能还没开通,所以采用微信公众平台测试帐号, 用微信扫码登录就可以获得一个自己的微信测试号: 扫码关注测试账号: 各种功能接口文档都有提供,可根据需求自行查看。 如果...

    一、

    由于微信个人订阅号目前很多功能还没开通,所以采用微信公众平台测试帐号,

    用微信扫码登录就可以获得一个自己的微信测试号:

     

     扫码关注测试账号:


    各种功能接口文档都有提供,可根据需求自行查看

     

    如果要在线调试接口,需要自己申请一个订阅号,登陆之后,点击开发者工具->在线调试工具

     

     

     

    二、

    上面的准备工作做完了,就可以开始调用接口实现功能了。

    #coding:utf-8
    
    import time
    import datetime
    import os
    import ConfigParser
    import requests
    import json
     
    class MsgToWeiXin(object):
        def __init__(self):
            self._config = ConfigParser.SafeConfigParser()
    #         self._config.read('config.ini')
            batRunningPath = os.path.dirname(os.sys.executable)
            batPath = os.path.dirname(os.sys.path[0])
            if os.path.exists(batPath + "\MsgToWeiXin\config.ini"):
                self._config.read(batPath + "\MsgToWeiXin\config.ini")
            else:
                self._config.read(batRunningPath + "\config.ini")
             
            self._access_token = ""
            self._expires_in = 7200
            self._token_getTime = 0
            self._appid = self._config.get("weixin", "appid")
            self._secret = self._config.get("weixin", "secret")
            self._touser = self._config.get("weixin", "touser")
            self._togroup = self._config.get("weixin", "groupid")
            
            datenow = datetime.datetime.now()
            datenow = datenow.strftime("%Y%m%d")
            self._nToDay = datenow
                
            self._msg = ""
                
        def getMsgFromTxt(self):
            datenow = datetime.datetime.now()
            datenow = datenow.strftime("%Y%m%d")
            strFileName = str(datenow) + "_IndexServerInterface.txt"
            print strFileName
            try:
                for line in open(strFileName):
                    if line != "\n":
                        self._msg += line
                
                return True
            except Exception, e:
                print str(e)
                return False
             
        def get_token(self):
            url = 'https://api.weixin.qq.com/cgi-bin/token'
            values = {
                      'grant_type':'client_credential',
                      'appid' : self._appid ,
                      'secret':self._secret,
               }
            req = requests.get(url, params=values)
            data = req.json()
            self._token_getTime = time.time()
            self._access_token = data["access_token"]
            self._expires_in = data["expires_in"]
         
        def send_msg(self):
            url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=" + self._access_token
            content = "Date:{0},\r{1} \r\n".format(self._nToDay,self._msg)
            values = {
            "touser" : self._touser ,
            "msgtype":"text",
            "text":{
                "content": content
            }
            }
            #header={"content-Type":"application/json"}
            #req = requests.post(url, data=json.dumps(values),headers=header)
            req = requests.post(url, data=json.dumps(values, ensure_ascii=False))
            result = req.json()
            return result['errcode']
         
        def send_msg_group(self):
            url = "https://api.weixin.qq.com/cgi-bin/message/mass/sendall?access_token=" + self._access_token
            content = "Date:{0},\r{1} \r\n".format(self._nToDay,self._msg) 
            values = {
            "filter" : {
                        "is_to_all":False,
                        "group_id":self._togroup,
                        },
            "msgtype":"text",
            "text":{
                "content": content
            }
            }
            #header={"content-Type":"application/json"}
            #req = requests.post(url, data=json.dumps(values),headers=header)
            req = requests.post(url, data=json.dumps(values, ensure_ascii=False))
            result = req.json()
            return result['errcode']
        
    if __name__ == '__main__':
        msgToWX = MsgToWeiXin()
        if True == msgToWX.getMsgFromTxt():   
            if msgToWX._msg != "":
                print msgToWX._msg
            else:
                msgToWX._msg += "指标数据正常"
            msgToWX.get_token()
            if 0 == msgToWX.send_msg():
                print "send success"
            else:
                print "send failed"
        else:
            print "getMsgFromTxt error"
    

      

    Linux下报错:ImportError: No module named 'requests.packages.urllib3'

    解决方法:https://www.cnblogs.com/SZxiaochun/p/9831389.html

    转载于:https://www.cnblogs.com/SZxiaochun/p/6370950.html

    展开全文
  • 在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的需求; 那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等...
  • 0 前言 最近的工作重心一直在小程序,也开发了几个小程序,对小程序开发的流程及相关技术相对比较熟悉,在开发过程中也总结了一些心得经验、了解一些小程序文档上没有的东西、踩了一些坑。所以想着写篇文章记录下来...
  • 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用。下面是这些方法的一个简单介绍,适时地运用它们,对于...
  • 微信小程序个人心得

    2019-09-26 07:52:01
    昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. 1 2 3 app.js ...
  • 首先关闭微信开发者工具中的验证 单击工具栏中的详情按钮,选中图中所示选项即可。 2. 将Node.js安装成功后,创建空目录作为项目目录。然后打开命令提示符切换到该目录 目录位置随意,此处我放在了wechat文件夹里...
  • 摘要: 请求时间太长,影响用户体验,使用 Fundebug 监控慢请求。 Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request发起 HTTP 请求,如果请求失败,会被捕获并上报...
  • Wafer2小程序解决方案使用过程 ...用微信开发者工具打开后大致看一下,能理解多少就理解多少 觉得不理解的就先上开发者文档上看看: https://developers.weixin.qq.com/miniprogram/dev/ 而...
  •  对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。  2.开发准备:  (1)有人开玩笑说,会vue小程序根本都不用学:  微信小程序虽然是...
  • Q:1.5版本基础库的小程序出现了image bindload事件响应两次的问题。A:你好,感谢反馈,我们会尽快进行修复,敬请关注。Q:地图里marker的callout在...Q:新版微信开发者工具,tabBar选中字体颜色不对。A:收到,我...
  • 开发工具使用登录页使用微信扫码登陆开发者工具开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。模式选择开发者工具提供两种开发模式的选择。公众号网页调试 : 直接进入公众号网页项目调试界面,在...
  • 各位 这个工具是本人写的非常简陋体验也非常一般,大家手下留情,不要吐槽!能用上的拿去用吧!Monkey说开源,但是呢git我正在研究怎么用,回头更新源码给大家! 这个工具问题估计很多,写的不是很好会有很多手机不...
  • 一、小程序介绍与开发环境: 1、helloworld代码 【1】请前往...【2】打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,并取消勾选“建立普通快速启...
  • mars 是微信官方的终端基础组件,是一个使用 C++ 编写的业务性无关,平台性无关的基础组件。
  • uni-app开发小程序总结

    2020-07-25 22:50:33
    最近开发项目中使用 uni-app 开发了 微信小程序,整个体验下来还算流畅,下面做一些总结: HBuilderX安装 HBuilderX安装的时候选择标准版...微信开发者工具 HBuilderX运行/发布微信小程序在编译完成之后会尝试打开微信
1 2 3 4 5 ... 20
收藏数 3,287
精华内容 1,314
关键字:

微信开发者工具关掉性能监控