web开发者工具_微信web开发者工具 - CSDN
精华内容
参与话题
  • 微信web开发者工具0.7

    2020-07-22 23:33:15
    微信web
  • 微信Web开发者工具-Mac

    2020-08-07 13:40:59
    为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。版本号:1.02.1808080
  • 微信web开发者工具 移动调试

    万次阅读 2018-06-13 10:03:16
    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前端助手

    千次阅读 2018-07-24 22:07:02
    我们今天就来学习一个在开发中非常实用的小工具——web前端助手,这个工具能帮助我们快速格式化json字符串并且还能美化字符串。虽然这个名字听着像是前端开发使用的,但是作为后台开发的朋友来说也是一款非常实用的...

    json格式的数据在现在的开发中是非常受欢迎的,因此很多时候我们写程序的请求参数和返回值都回选择json格式。我们今天就来学习一个在开发中非常实用的小工具——web前端助手,这个工具能帮助我们快速格式化json字符串并且还能美化字符串。虽然这个名字听着像是前端开发使用的,但是作为后台开发的朋友来说也是一款非常实用的工具。下面讲一下具体的安装使用教程。

    1.web前端助手:是chrome浏览器的一个插件,所以我们需要将这个插件嵌入到chrome中使用(其他浏览器是否能使用暂未做测试)。下载地址:web前端助手

    2.安装插件

    打开chrome的扩展程序界面

    打开开发者模式

    将下载好的插件拖入界面

    确认

    安装成功

    功能及使用

    安装步骤到此结束了。

    3.我们在写后台接口程序的时候需要反复调试,有时候返回的数据太多了,就比较难以观察:

    安上chrome的插件之后:

    是不是瞬间就感觉舒服多了~ 其余的功能请根据需要自行尝试使用,很简单也很实用的小插件!

    展开全文
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 2018-07-22 09:39:47
    一、微信小程序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

    展开全文
  • WEB浏览器中开发者工具的几个技巧

    千次阅读 2018-12-26 18:19:56
    文章目录浏览器的开发者工具什么是开发者工具调试HTML...用来调试HTML,js等web内容的工具,就是开发者工具,我们可以通过开发者工具看到web页面的HTML,JS,以及浏览器的网络请求,CSS样式,内存使用等。 调试HTML ...

    浏览器的开发者工具

    在浏览器的正文中点右键,或者在浏览器的菜单里面,更多工具,可以很容易的找到开发者工具,当然,你也可以使用F12直接调出这个工具组。

    什么是开发者工具

    用来调试HTML,js等web内容的工具,就是开发者工具,我们可以通过开发者工具看到web页面的HTML,JS,以及浏览器的网络请求,CSS样式,内存使用等。

    调试HTML和CSS

    调试HTML
    在Element选项卡中,可以看到当前的HTML,鼠标在HTML标签中移动,可以看到左侧对应的标签被选中,同时会显示他的content范围,padding范围,margin范围,在我们双击标签的时候,是可以对他进行修改的,右键有编辑HTML的选项。

    通常,选择一个HTML元素之后,我们可以看到他的css样式,这些样式一侧有一个复选框,点击它可以打开或者关闭这个属性,然后能够在左侧立即观察到效果。

    某些元素具有类似hover这类的特殊的选择器,这个时候,我们可以点击需要查看的元素,然后对他右键,就会得到这样的菜单:

    在这里插入图片描述

    只需要在Force state中选择就可以固定页面的元素为某种状态,以对css进行Debug。

    在这里插入图片描述

    这个是Copy菜单,可以对元素进行整体复制,获取XPath(做爬虫或者分析页面就可以通过XPath直接得到对应的元素)或者选择器。

    图标
    第一个是指针工具,可以在左侧页面选中HTML元素,此时右侧会选中他的代码,很方便,第二个是手机模式,浏览器会模拟手机访问的效果,如果使用了响应式的前端框架,那么它就可以很方便的查看页面在手机端的表现。

    调试JS

    Element旁边的选项卡就是Console,控制台。

    控制台会有Javascript打印的log,或者报错信息,同样,控制台下面是可以输入的,它能够直接执行javascript片段。

    目前PC端浏览器对javascript的支持十分良好,已经可以原生使用ES6了。

    但是如果需要在浏览器(HTML中)使用ES6,需要将script标签的type属性设置为module。浏览器已经可以支持包括importexportfetch等在内的多数ES6特性了。

    在这里插入图片描述

    javascript经常会发起ajax请求,如果需要知道是那个位置的js发起了请求,那么我们可以勾选Log XML HttpRequest,然后就可以得到这样的log:
    在这里插入图片描述
    从这里的输出就可以找到请求发起的位置。

    在控制台旁边的,是JS的调试器,它能够做到js的断点调试。
    在这里插入图片描述
    文件目录:就是这个web页面正在工作的时候使用的一些HTML,js,css等资源的目录,可以在这里查找想要调试的源代码。

    文件目录旁边的是行号,可以在上面下断点,程序运行到断点会停下来。

    然后是源码正文,在调试的时候,可以用鼠标圈选需要查看的变量等,可以看到此时具体的值。
    最下面是调试工具。从左到右依次是:暂停/继续,单步跳过,单步进入,单步跳出,单步执行,禁用断点,最后一个我没用过。

    在这里插入图片描述

    那个行号上面的蓝色部位就是断点的标记,在断点命中后,js将会暂停执行,这个时候的调试页面就会像现在这样,左侧是调用栈,右侧的scope选项卡会出现当前的局部变量和全局变量,可以在这里进行观察,局部变量上方还有watch选项卡,我们可以在这里编写一些表达式,用来方便观察和调试。

    在这里插入图片描述

    鼠标移到变量上方,会弹出一个悬浮窗,并且显示变量此刻的内容,如果需要查看表达式或者变量调用方法或者变量的成员,那么可以使用鼠标圈选它,然后移到选定内容的上方,此时会出现和上图一样的悬浮窗,显示圈选部分的内容,就像这样:

    在这里插入图片描述

    (待续…)

    展开全文
  • 微信web开发者工具简介

    万次阅读 2016-10-03 00:12:51
    微信web开发者工具 为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发...
  • 微信web开发者工具无法打开的解决方法

    万次阅读 热门讨论 2017-09-09 16:14:28
    安装了之后,除了刚安装完可以自动打开后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨人的小家伙其实解决这个问题很简单,只需要使用你的管理员权限便可轻松打开微信Web开发者工具。 1、第一步,右键...
  • 微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin
  • 背景:使用微信web开发者工具进行移动调试,按照 配置网络代理后,如图: 当重启微信后,发现公共号上不去了,也不能正常的上网了 可以将服务器地址更改为: 去掉http://后再尝试,就可以了,然后...
  • 微信web开发者工具使用教程

    万次阅读 2016-12-13 11:40:33
    即刻下载使用==》微信web开发者工具下载 2、调试微信网页授权,具体操作步骤为: 1)开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页...
  • 微信web开发者工具的使用

    万次阅读 2016-03-22 23:10:48
    2016年初微信发布微信web开发者工具,可以在PC或Mac上模拟访问微信内网页,帮助开发者更方便地进行开发和调试 1、上一篇文章微信企业号jssdk拍照http://blog.csdn.net/u014520797/article/details/50890513也可以...
  • 1.首先下载web微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ...   ...3.使用web开发者工具  1.首先获取到微信公众号开发者的权限,打开微信公众平...
  • 微信web开发者工具不能打开的问题

    万次阅读 2018-06-06 22:05:30
    今天新装的微信开发者工具,安装完成以后就是打不开,点解没有反应,win10 64的系统,各种百度,最后找到解决的方案把这些都关闭了就OK了!!!
  • 今天遇到一个问题,开发微信公众号和小程序的微信web开发者工具,突然打不开了,无论怎么点击,怎么重启电脑都打不开,昨天都好好的,今天上班就出问题了。 刚刚解决,现在把解决办法附上,希望对大家有帮助: ...
  • 1.登录微信公众号平台 https://mp.weixin.qq.com 1.1选择开发者工具 1.2选择web开发者工具 1.3邀请绑定即可 2.登录微信小程序 https://mp.weixin.qq.com
  • 最近在做微信小程序,遇到了一个问题,就是下载微信小程序的开发工具后,居然打不开:我的系统是windows7 64为,系统为I5,在CSDN,百度上查了很久,有很多办法,但是都不合适,发现都是坑啊,浪费了快一天时间!...
  • 微信web开发者工具(小程序开发工程),打开后卡住显示黑色或白色窗口如下图解决办法是,右击微信web开发者工具.exe文件,修改兼容性,改为windows7,如图:应用确定后,再次启动就可以了。...
  • 上次是重装了解决了卡顿的问题; 总不能过几天就重装一次啊...0. 关闭微信web开发者工具; 1. 打开 finder, 按下 shift + command + G , 输入 ~/资源库 2. 找到 下面几个文件夹, 删掉这几个东西:  Application Suppor
  • 关于微信web开发者工具模拟器出现空白问题,代码没错误,在模拟器中无法显示UI界面。 有博主总结点击开发者工具的 “>>”–>详情–>上传代码时自动压缩混淆功能取消勾选。 经过我的调试,取消勾选后也...
1 2 3 4 5 ... 20
收藏数 226,694
精华内容 90,677
关键字:

web开发者工具