web开发者工具_微信web开发者工具 - CSDN
精华内容
参与话题
  • 引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东西了,或者换句话说,你想要实现的功能,你总能在某个地方搜索到答案,关键是你有没有这个时间精力去搜寻...

      引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东西了,或者换句话说,你想要实现的功能,你总能在某个地方搜索到答案,关键是你有没有这个时间精力去搜寻!以至于大多数的开发,其实就是一个找资料的过程,一个复制粘贴的过程,这的确也是一个可悲的现象。不过,换个角度来看,其实也挺好,现在咱们凡事都讲求一个效率问题,只要能实现功能,就甭管他复制粘贴抄袭了。问题的关键是,你得会复制、粘贴、抄袭,你得会调试你的代码啊!难道有人给了你所有的配件你就能把车子给组装起来?难道有人送你一辆好车你就会改装了?然并卵,关键还得看你自己有几斤几两了。

      我记得我曾经有一位资深的运维同事给我说过一句话:所谓的开发不过是仅仅掌握了一些调试代码的技巧而已。虽然我本人对于运维的工作也不怎么看得上眼,但是,不得不说,我很赞同他这句话。因为如今互联网横行的今天,有太多太多的参考,你可以实现所有你想实现的。但又正是因为有太多太多的参考,以至于我们都不知道选择什么好,哪个是对的,哪个是错的?谁说不是呢,没有选择是一种无奈,太多选择总会让人浮躁!你如果能够随心所欲地调试你的代码,谁敢说你不牛掰我都不信了?

      看本文标题,是讲Web调试的,但是我估计废话所占的篇幅不小,因为,哈哈,我TM就是一个喜欢来虚的这么一个人!我所谓的虚的,是指理论级别的东西而非实战级别。但是,我始终坚信,理论是实践的基础,实践会加深真理论的认识!想成为一个真正的开发人员,我觉得,至少你得了解计算机它是怎么工作的。基础知识真的是必不可少的,如:计算机原理,汇编,单片机,C,VB,VC,数据结构,经典算法!这些无疑都会加深你对理论的了解!

      好,废话已经太多。下面进入正题,作为Web开发者,Web调试工具自然是必不可少的。那么,我们就来聊聊Chrome, Firefox, IE三大家的Web调试的一些特点(虽然市面有数不清的浏览器,但是纠其内核,基本都是这三者之一),以及都有哪些技巧?

      一、Firefox 插件之 Firebug, 火狐调试利器【初学必备】

      为什么要第一个提到火狐呢?因为啊,这东西确实是太方便了,刚开始接触开发那会儿,根本都不知道调试,只是凭着感觉去做事。后来看到有人在用Firefox 的 Firebug,一下就爱上了,原因如下。优点:1 中文;2 直观;3 定位超级快!缺点:1 插件每次都需要重新下载;2 每次都要重新启用才可以使用各种调试功能。

      下面我们先看几个主要功能模块截图,稍后稍细作解析!

    . 控制台

    .. 脚本调试

    ... 网络收发状况查看

      里面主要用到的功能是,1. 控制台,可心直观的看到一些页面的基本情况,如上图所示的错误信息,以及一些ajax的请求,很轻松的点开就可看到访问的参数等等,基本上通过这里的调试,可以给你省去30%~40%的错误了;2. 脚本页,如果js脚本比较复杂,那页面js单步调试等功能就很有必要了,Firebug中有一个很好的搜索功能@多文件搜索,也就是说,你只要能说出其个别的关键词,他就可以帮你找到具体在哪个脚本页面哪一行。3. 网络功能,用于查看各个页面的具体请求情况很方便,用于定位哪个节点是否出问题是必须的,当然,多了解一点http协议对于这一块的理解还是很有好处的。

      二、Google Chrome 之F12自带控制台【水平的进阶】

      Google作为W3C标准制定者之一(好像是的),是个绝对的W3C标准支持者,因此对于很多的标准属性,在chrome都有很好的展现。但是有一点让人很困惑,那就是整个页面都是英文,描述也和咱中国人的习惯不太吻合,所以适合用于进阶却不适合用于初学,适合用于英语水平稍好点的同学(当然了,看习惯也就都一样了)。优点:1 浏览器自带;2 官方标准适合自己写标准语法;3 功能齐全;4 控制台调试非常方便几乎可以当作一个简单的帮助文档来使用!缺点:如前所述!

      下面先看几个截图,稍后细作讲解!

    . 页面元素查看

    .. 网络状况查看

     

    ... 资源使用情况(脚本调试)

    .... 控制台临时运行

      作为一个经验稍微丰富点的开发人员,我认为chrome的调试是必备的,虽然有很多乱七八糟的英文,但我们还是可以克服的嘛,而且他功能特别齐全。基本功能和火狐的firebug差不多,不同的只是一个展现方式的不一样,那我就说几个特殊的或者前面没有说到的点好了。1. 很方便地动态编辑html元素,从而避免反复改代码调试的工作,同理于css样式的编写。写html页面我有一个不成熟想法:其实我不会写什么页面,我不过知道几个标签html,div,span和几个css名称display,position,font-size,然后我就不停在浏览器控制台里猜测各种想法,然后复杂的效果就出来了;2. 作为脚本调试,我本人还没有习惯chrome的调试方式,不支持多文件搜索,这对于包含文件很多的地方并不是好事,不过你可以把所有的资源都打开,这时候再搜索就可以给你定位了;3. 适应他的网络查看工具(点击链接后具体信息在右边展示,时间轴根据情况适当隐藏);4. 多利用控制台写一些尝试操作,对于已经加载了的全局变量,你可以直接在控制台使用,如要查看某元素高度,$('#ele').height();这里的'$'就是文档中已经加载的jquery变量。5. 其他一些优化工具可以尝试使用!(哈哈,我只是看并不用)

      三、IE 工具之 httpwatch 【看个人喜好了】

      其实,我基本上不会用IE去调试代码的了,但是作为一个知名度不低的浏览器,以及名声赫赫的httpwatch还是有必要了解一下的。优缺点自行判断,我就说两句就好。1. 功能强大,可以将访问日志导出,在另外的地方进行静态分析;2. 抓包,其实他就是干这个事的!3. IE的F12反正和其他的也差不多(我说的是高版本),简单搞搞就行,反正我仅仅用来调试兼容性问题!

      工欲善其事,必先利其器!只有有一个好的顺手的调试工具帮助你,你才能更快地进行你的工作。当然,你最好有一些基础理论知识,这对于你排查问题找方向会有很大的帮助!So, Debug your code, Debug yourself.

      注:本文主要讲web控制台调试,看起来好像全是前端工作,但是其实往往是和后端紧密相连的!一个字,去了你就知道了!

    转自:https://www.cnblogs.com/yougewe/p/5152700.html

    展开全文
  • 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开发者工具,新建项目(文件选择之前下载到本地的项目) 第四步:待第二步完成以后,在web开发者工具里面刷新页面即可 ...

    有时候需要自己在本地生成小程序的二维码或者是对小程序进行测试,现需要将项目在本地运行

    第一步:使用IDEA将项目代码下载到本地,且在本地运行,并切换到自己想使用的分支

    第二步:在IDEA中执行命令:npm run build – --env=test

    第三步:打开web开发者工具,新建项目(文件选择之前下载到本地的项目)

    第四步:待第二步完成以后,在web开发者工具里面刷新页面即可

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

    2020-07-22 23:33:15
    微信web
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 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-07-24 22:07:02
    我们今天就来学习一个在开发中非常实用的小工具——web前端助手,这个工具能帮助我们快速格式化json字符串并且还能美化字符串。虽然这个名字听着像是前端开发使用的,但是作为后台开发的朋友来说也是一款非常实用的...
  • 推荐:web开发人员常用8个小工具

    千次阅读 2016-12-07 18:01:26
    随着技术发展,web网页开发要求越来越高,开发者都希望能更快速更高效更完美地展示,但工欲善其事必先利其器,今天我们大圣众包(www.dashengzb.cn)小编就为大家整理8个好用的web开发常用工具,希望可以收藏实践下...
  • 微信web开发者工具简介

    万次阅读 2016-10-03 00:12:51
    微信web开发者工具 为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发...
  • 微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin
  • 微信web开发者工具无法打开的解决方法

    万次阅读 热门讨论 2017-09-09 16:14:28
    安装了之后,除了刚安装完可以自动打开后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨人的小家伙其实解决这个问题很简单,只需要使用你的管理员权限便可轻松打开微信Web开发者工具。 1、第一步,右键...
  • 背景:使用微信web开发者工具进行移动调试,按照 配置网络代理后,如图: 当重启微信后,发现公共号上不去了,也不能正常的上网了 可以将服务器地址更改为: 去掉http://后再尝试,就可以了,然后...
  • 今天遇到一个问题,开发微信公众号和小程序的微信web开发者工具,突然打不开了,无论怎么点击,怎么重启电脑都打不开,昨天都好好的,今天上班就出问题了。 刚刚解决,现在把解决办法附上,希望对大家有帮助: ...
  • 微信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...
  • 微信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.首先获取到微信公众号开发者的权限,打开微信公众平...
  • 1.登录微信公众号平台 https://mp.weixin.qq.com 1.1选择开发者工具 1.2选择web开发者工具 1.3邀请绑定即可 2.登录微信小程序 https://mp.weixin.qq.com
  • 微信web开发者工具不能打开的问题

    万次阅读 2018-06-06 22:05:30
    今天新装的微信开发者工具,安装完成以后就是打不开,点解没有反应,win10 64的系统,各种百度,最后找到解决的方案把这些都关闭了就OK了!!!
  • 1.有时候开发者工具一开始运行,就会出现网络连接失败这几个字,其实这个原因很简单就是因为当前系统时间不对 2.出现new.js页面的原因是因为最新版本的bug,下个上个版本就可以. 3.电脑配置...
  • 使用Chrome开发者工具web socket应用的调试显得异常方便。 打开Chrome开发者工具,切换到network标签页,选择Filter,根据WS过滤, 刷新我们的web socket应用,回到开发者工具,马上就能看到对应的记录了: 在...
1 2 3 4 5 ... 20
收藏数 224,568
精华内容 89,827
关键字:

web开发者工具