微信开发工具调试小程序打开网页_微信开发者工具调试公众号网页怎么打开项目 - CSDN
  • 微信开发者工具调试大法

    万次阅读 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...

    由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟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)

    展开全文
  • 但是微信小程序不能输入地址栏,每次刷新都回到首页。 每次修改代码,会自动编译,刷新。进入首页需要重新点击,从首页进入到编辑的页面。 pages/ask/ask 这个是我正在写的页面,只需要把"pages/ask/ask"添加到 ...

    写普通页面,清除浏览器缓存,按F5刷新。但是微信小程序不能输入地址栏,每次刷新都回到首页。

    每次修改代码,会自动编译,刷新。进入首页需要重新点击,从首页进入到编辑的页面。

    pages/ask/ask 这个是我正在写的页面,只需要把"pages/ask/ask"添加到 pages数组的首个元素即可。

    * app.json

    {
      "pages": [
        "pages/ask/ask",
        "pages/index/index",
        "pages/user/index",
        "pages/login/login",
        "pages/logs/index",
        "pages/ask/index",
        "pages/scope/index",
        "pages/user/edit",
        "pages/user/help",
        "pages/ask/add"
      ],
      "window": {
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTitleText": "",
        "navigationBarTextStyle": "black",
        "backgroundTextStyle": "dark"
      },
      "tabBar": {
        "color": "#6e6d6b",
        "selectedColor": "#ff9966",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/tabBar/home.png",
            "selectedIconPath": "images/tabBar/home_on.png"
          },
          {
            "pagePath": "pages/ask/index",
            "text": "问病理",
            "iconPath": "images/tabBar/ask.png",
            "selectedIconPath": "images/tabBar/ask_on.png"
          },
          {
            "pagePath": "pages/scope/index",
            "text": "实视",
            "iconPath": "images/tabBar/view.png",
            "selectedIconPath": "images/tabBar/view_on.png"
          },
          {
            "pagePath": "pages/user/index",
            "text": "我的",
            "iconPath": "images/tabBar/user.png",
            "selectedIconPath": "images/tabBar/user_on.png"
          }
        ],
        "position": "bottom"
      },
      "networkTimeout": {
        "request": 1000,
        "downloadFile": 10000
      },
      "debug": true,
      "sitemapLocation": "sitemap.json"
    }

     

    展开全文
  • 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。 这个系列的下一步,会继续介绍这个微信小程序的控制器...

    微信小程序开发系列教程

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

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

    这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个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的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

    展开全文
  • 利用微信开发者工具获取小程序指定页面路径! 文章来源:企鹅号 - 程鹏亮 小程序不同于app,小程序的每个页面都有页面路径。在使用微信小程序的过程...首先你得先下载安装微信开发工具,并且获得小程序前端代码...

    利用微信开发者工具获取小程序指定页面路径!

    文章来源:企鹅号 - 程鹏亮

    小程序不同于app,小程序的每个页面都有页面路径。在使用微信小程序的过程中,很多场景都要使用到小程序的页面路径。比如微信图文中的小程序,公众号菜单中的小程序,小程序的互相跳转等等各种应用场景,今天教大家如何使用微信开发者工具获得小程序指定页面的路径。

     

     

    首先你得先下载安装微信开发着工具,并且获得小程序前端代码包,像一些扫码上传的平台,你是拿不到代码包的。这些获取路径就比较麻烦。

    安装好小程序开发者工具,以开发者的身份登陆工具,新建小程序项目,导入前端代码包,就可以看到下面的页面了

     

    打开开发者工具,在底端可以看到页面路径和页面参数。小程序的完整路径是由小程序的页面路径和页面参数组成的。比如上面这个小程序

    页面路径pages/bigcms/article/article

    完整路径pages/bigcms/article/article?id=24332&typeid=3

    页面路径和页面参数中间使用?连接。这个路径可以使用到很多场景,比如

    展开全文
  • 微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin
  • 微信开发者工具调试小程序 webview 页面白屏,但是 date 里面数据一切正常 微信开发者工具不能调试公众号网页,但是打开百度正常 解决方案 这个原因真是微信的锅,让人搞了一上午。微信开发者工具在2019年4月份之后...
  • 如何用微信web开发者工具测试调试并打包上传小程序,其实还是很简单的,这个教程针对小白,大神请直接略过。 一、下载并安装软件(根据自己电脑实际情况选择版本安装) 如何用微信开发者工具新建小程序项目并打包...
  • 微信开发者工具-调试

    千次阅读 2019-08-02 11:40:19
    微信开发者工具-调试调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、...Sources 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sou...
  • 最近企业微信上的开发困扰了我很久,企业微信上的页面无法调试,无从下手。 突然发现企业微信微信有一个调试工具,...5.安装完后打开调试工具,选择公众号网页 6.在web开发者工具输入网址(企业微信中的自建应...
  • uni-app开启微信小程序调试

    千次阅读 2019-04-03 16:40:06
    开发uni-app项目过程如何开启微信小程序进行实时编译调试。首先根据官网做如下配置 1、点击“工具” -》 “设置” -》 “运行配置”,找到“微信Web开发者工具” 安装所在的文件夹。复制路径,填入到“小程序运行...
  • 微信小程序开发工具调试界面鼠标看不见
  • 第一步:安装【微信web开发工具】。点击上方栏【工具】,选择【设置】,到指定网页安装,安装完成后需手动输入文件路径。 第二步:点击【运行】,选择【运行到小程序模拟器】,可选择是否【运行到页面】 第三步:...
  • 微信小程序开发工具使用简介

    千次阅读 2019-04-30 00:58:17
    为了帮助开发者简单和高效地开发调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试小程序调试两种开发模式。 使用公众号网页调试,开发者可以调试...
  • 微信开发者工具调试微信网页授权,点击‘登录’按钮无效 问题描述 h5页面需要获取微信用户信息,参考微信开发者文档: 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,...
  • 今天在用HBuild编译别人的开源项目到微信小程序的时候,出现“uni_app 微信开发工具 调试 小程序 启动开发工具失败”的问题。 后来去DCloud社区看了一下,也有人有这个问题,有人提出一种曲线救国的解决方案: ...
  • 微信小程序使用真机或开发工具进行http请求开发测试1使用微信开发这工具进行http请求的配置2:真机进行http请求 微信开发这平台要求上线微信小程序配置的合法域以及网络请求名必须是https,如果是在开发测试阶段需要...
  • 于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 微信浏览器网页调试

    2019-11-06 09:00:47
    下载微信web开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html(支持小程序开发 2.微信自带调试 微信浏览器网页打开http://debugx5.qq.com(仅支持android微信)打开下...
  • 后台小程序信息完善 安装开发工具IDE 小程序项目搭建 项目编译 真机预览调试 小程序开发前准备: ①申请账号 ②安装开发工具 账号申请 进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序...
  • 微信开发者工具很好的集成了java的开发环境,是java初学者很好的练手软件。准备条件:注册微信小程序开发者账号,需要用到微信账号。 网址:https:...
1 2 3 4 5 ... 20
收藏数 10,332
精华内容 4,132
关键字:

微信开发工具调试小程序打开网页