微信开发者工具怎么印出来_微信开发者工具 打印 - CSDN
  • 一、微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目 2.1 微信小程序web开发工具...

    一、微信小程序web开发工具下载地址


    1.1 在微信公众平台-小程序里边去下载开发工具下载地址


    1.2 下载后安装一下就可以使用了:


    二、创建项目


    2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:



    2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。





    AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:




    三、开发工具界面介绍:





    1. 编辑:开发的时候,需要到编辑区去写代码 

    2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

    3. 项目:在这里可以上传或者预览项目

    4. 编译:就相当于运行项目的意思

    5. 关闭:关闭当前工程

    6. 微信小程序web开发工具提供实时预览的功能,界面的效果会在这个区域显示

    7. 这个区域可以看到整个项目的文档目录结构

    8. 这个区域是编码区

    9. 这里是选择屏幕尺寸的地方

    10. 模拟网络环境:2G/3G/4G/WiFi



    四、调试区六大工具介绍:


    在调试区开发工具提供了6种调试模式:


    4.1 Console

    Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。


     

    4.2 Sources

    Sources显示了当前项目的所有脚本文件,微信小程序框架会对这些脚本文件进行编译。

    Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。



    4.3 Network

    Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。



    4.4 Storage

    官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究


     

    4.5 AppData

    AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。



    4.6 Wxml


    Wxml调试区:把他的名字换一下的话大家就好理解了,其实他的实质就是HTML+CSS,微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白,左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。




    转自:http://lib.csdn.NET/article/5/52864?knId=1796#focustext

    展开全文
  • 于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟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)

    展开全文
  • 于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟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)

    展开全文
  • 微信开发者工具是微信小程序官方指定的开发工具,但是微信官方没有推出Linux版本,幸好很多牛人自己制作了能够在Linux中运行的微信开发者工具版本。该文中便是采用github中开源的linux版开发者工具。 一、准备 ...

    微信开发者工具是微信小程序官方指定的开发工具,但是微信官方没有推出Linux版本,幸好很多牛人自己制作了能够在Linux中运行的微信开发者工具版本。该文中便是采用github中开源的linux版开发者工具。

    一、准备

    安装前需要下载或者克隆开发者工具源码,地址:https://github.com/dragonation/wechat-devtools

    二、安装

    该开源项目中提供了两种安装方式,为了尽量减少错误,推荐下载release包安装。下面的步骤以及对出现的问题解决基于release包。

    1、下载release包,下载到放软件的任意文件夹或者下载好后剪切到放软件的文件夹。

    2、使用tar -zxvf命令解压tar包

    3、进入解压后的文件夹,打开终端执行./bin/wechat-devtools

    执行完以上三步之后如果没有在终端中报任何错误,或者重复报一个错误,但是开发者工具能够正常运行也是没有问题的。

    三、问题解决

    在安装过程中遇到了两个问题,提了isuse,地址:https://github.com/dragonation/wechat-devtools/issues/10

    问题1:报错信息如下

    Fontconfig warning: "/usr/share/fontconfig/conf.avail/05-reset-dirs-sample.conf", line 6: unknown element "reset-dirs"
    [24037:24037:0721/174513.648341:ERROR:sandbox_linux.cc(370)] InitializeSandbox() called with multiple threads in process gpu-process.
    [24055:24055:0721/174513.679617:FATAL:nw_content_renderer_hooks.cc(53)] Failed to load node library (error: libatomic.so.1: 无法打开共享对象文件: 没有那个文件或目录)
    #0 0x7fbea32f3f79

    出现该问题的原因是libatomic.so.1库有问题。

    解决方案:重新安装libatomic.so.1库。

    libatomic.so.1库64位下载地址:https://rpmfind.net/linux/rpm2html/search.php?query=libatomic.so.1()(64bit)

    下载的为RPM包,安装时采用sudo来提升权限,不然可能会遇到权限不够导致安装失败。

    问题2:在问题1解决后出现了问题2。报错信息如下

    [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL command (node:5143) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

    解决方案:安装或者重新安装wine。

    安装wine可参照这里选择对应的版本,然后按照安装步骤进行安装,尽量使用sudo来提升权限以免遇到权限不够。以Fedora为例。

     安装之后如果还是不行,可以在终端安装wine,fedora中为:sudo dnf install wine

    四、制作快捷方式

    通过以上几步得到基本可以使用的开发者工具,在终端中还会看到几个一直打印的错误,但不影响开发者工具的运行。比如

    GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL command
    Cannot find context with specified id", source: chrome-devtools://devtools/bundled/shell.js (7963)

    开发者工具已经安装好了,但是每次使用都要打开终端进行运行,使用起来非常不便利,所以我们来给它制作一个快捷方式,让它可以像正常安装的软件一样,点击快捷方式就可以顺利打开。步骤如下。

    1、执行cd /usr/share/applications,进入目录

    2、使用vi或vim或其他编辑器创建一个后缀为.desktop的文件,文件内容如下:

    [Desktop Entry]
    Name=wechat devtool
    Comment=Code Editing. Redefined.
    GenericName=wechat miniiprogram Editor
    Exec=/home/wzl/软件/wechat-devtools-1.03.2006090/bin/wechat-devtools --no-sandbox --unity-launch %F
    Icon=/home/wzl/软件/wechat-devtools-1.03.2006090/res/icons/wechat-devtools128.png
    Type=Application
    StartupNotify=false
    StartupWMClass=Code
    Categories=Utility;TextEditor;Development;IDE;
    MimeType=text/plain;inode/directory;
    Actions=new-empty-window;
    Keywords=wechat-devtool;
    
    [Desktop Action new-empty-window]
    Name=New Empty Window
    Exec=/home/wzl/软件/wechat-devtools-1.03.2006090/bin/wechat-devtools --no-sandbox --new-window %F
    Icon=/home/wzl/软件/wechat-devtools-1.03.2006090/res/icons/wechat-devtools128.png
    

    如果不喜欢该软件中自带的图标,可以网上下载相关图片放到软件文件夹就行。

    展开全文
  • 简单的功能做的差不多了,然后打包到微信开发者工具和真机进行调试时发现了一些匪夷所思的问题(也许只是对我来说是这样)。记录一下,以避免以后踩同样的坑。 一、self in not defined 在本地和开发者工具中调试都...
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...
  • 安装微信开发者工具可以参考: 参考:https://blog.csdn.net/man_zuo/article/details/86554419 这里讲一下需要注意的事项: 1、需要安装NODE.js(First 坑) 在cmd控制台输入node -v和npm -v,这两个打印版本号...
  • 开发者工具配置:在开发者工具右侧的详情中的项目设置,将不校验合法域名打上勾index.js:Page({ //对应的index.wxml页面绑定的数据 data: { json : '' }, //index.wxml页面加载时调用的函数 onLoad: function...
  • 微信小程序的测试发布在没有 CI/CD 等相关工具的情况下,存在着如下的问题: 小程序开发助手中,同一个开发者只能显示一个开发版本 测试同事找开发要二维码,效率较低 本地生成的二维码会出现携带本地代码、未及时...
  • 微信小程序开发者工具命令行小秘书weappdevtools-cli-master.zip
  • 一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,...
  • 1.在微信开发者工具里面点击右上角的‘详情’,然后在‘项目设置’里面选择‘不校验安全域名、TLS 版本以及 HTTPS 证书’就可以了。 成功之后打印台上有提醒 这样设置之后,你就可以用http协议的地址进行交互...
  • 微信开发者工具开启并且实时显示你的界面的时候,就可以调试了。 调试好之后只需要点击"上传",前提是你要在"详情"里输入正确的APPID 域名配置 建议 都用https,迟早都要用的。用个花生壳,简简单单做调试。 里面...
  • 可点击工具栏 “切后台” 按钮。
  • 微信h5调试工具

    2018-12-10 14:32:02
    微信开发者点赞。然后就可以看到你打印的内容及其他的信息,比如cookie、LocalStorage,Network、Element…… 微信打开这个网址 http://debugx5.qq.com/ 暖心的我给你准备好了二维码,扫一扫吧  ...
  • 后来发现,开发者工具上的配置: 把这一项勾选之后,开发的时候可以请求,默认不校验证书。但是预览的时候手机会进行验证。所以预览请求不到数据。 正确配置是,登录小程序平台,点击 “开发–》开发工具。”向下...
  • 微信开发者工具中操作时:添加完基金后,会跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金 在真机调试、预览时:在手机上操作添加完基金后,会跳转到「基金页面pages/index/m...
1 2 3 4 5 ... 20
收藏数 7,543
精华内容 3,017
关键字:

微信开发者工具怎么印出来