精华内容
下载资源
问答
  • 常见的JavaScript调试工具
    千次阅读
    2018-12-25 17:23:37

    一、Firebug

    最常用的脚本调试工具,前端工程师必备,被喻为"居家旅行的瑞士军刀"

    二、Fiddler

    是一个本地代理服务器,需要将浏览器设置为本地代理服务器上网才可以使用,Fiddler会监控所有的浏览器请求,并有能力在浏览器请求中插入数据

    三、HttpWatch

    是一款商业软件,并以插件的形式嵌入在浏览器中,仅仅是一个专业的Web Sniffer

    四、Chrome的开发者工具

    一个浏览器调试工具,在经过了几个版本的更新,其调试功能也日渐强大。在打开Chrome后可以通过点击“F12”功能键、“Ctrl Shift I”或者“Ctrl Shift J”打开开发者工具。也可以通过工具 - 开发者工具 打开。

    更多相关内容
  • 当然,在此之前试了很多其它的调试方法,不过感觉还是微信官方提供的调试工具来得实在。下面记录下,以便自己以后查看。 下载&安装  微信开发者工具:...
  • Fiddler Web调试工具

    千次阅读 2019-03-06 15:39:58
    Httpwatch是比较常用的http抓包工具,但是只支持IE和firefox浏览器(其他浏览器可能会有相应的插件),对于想要调试chrome浏览器的http请求,似乎稍显无力,而Fiddler 4 是一个使用本地 127.0.0.1:8888 的 HTTP 代理...

    Httpwatch是比较常用的http抓包工具,但是只支持IE和firefox浏览器(其他浏览器可能会有相应的插件),对于想要调试chrome浏览器的http请求,似乎稍显无力,而Fiddler 4 是一个使用本地 127.0.0.1:8888 的 HTTP 代理,任何能够设置 HTTP 代理为 127.0.0.1:8888 的浏览器和应用程序都可以使用 Fiddler。

    1、简介

    Fiddler是位于客户端和服务器端的HTTP代理,也是目前最常用的http抓包工具之一。 它能够记录客户端和服务器之间的所有HTTP请求,可以针对特定的HTTP请求,分析请求数据、设置断点、调试web应用、修改请求的数据,甚至可以修改服务器返回的数据,功能非常强大,是web调试的利器。既然是代理,也就是说:客户端的所有请求都要先经过Fiddler,然后转发到相应的服务器,反之,服务器端的所有响应,也都会先经过Fiddler然后发送到客户端,基于这个原因,Fiddler支持所有可以设置http代理为127.0.0.1:8888的浏览器和应用程序。使用了Fiddler之后,web客户端和服务器的请求如下所示:

             教程的意思在于,当你对某一新事物不熟悉的时候,帮助你了解一下而已。所以这里就挑一些足够使用的tab来解释一下。

    2、Fiddler使用界面及其相关功能介绍

             会话(web session)主要由以下几种请求:

    QuickExec命令行的使用:

    Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令。

    常见得命令有:

    help 打开官方的使用页面介绍,所有的命令都会列出来

    cls 清屏 (Ctrl+x 也可以清屏)

    select 选择会话的命令

    ?.png 用来选择png后缀的图片

    bpu 截获request

    监听开关 - 只有两种状态,用的时候就开着,不用就关闭。capturing表示捕捉状态

    监听类型 - 四种状态分别对应:监听所有请求;监听浏览器请求,监听非浏览器请求,和全部隐藏(Hide All)

    HTTP统计面板(Statistics

    通过陈列出所有的HTTP通信量,Fiddler可以很容易的向您展示哪些文件生成了您当前请求的页面。使用Statistics页签,用户可以通过选择多个会话来得来这几个会话的总的信息统计,比如多个请求和传输的字节数。

    选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间。从条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化。

    还可以看出一些基本性能数据:如DNS解析的时间消耗,建立TCP/IP连接的时间消耗等等信息。

    检查器(Inspectors)

    分为上下两个部分,上半部分是请求头部分,下半部分是响应头部分。对于每一部分,提供了多种不同格式查看每个请求和响应的内容。JPG格式使用ImageView就可以看到图片,HTML/JS/CSS使用TextView可以看到响应的内容。Raw标签可以查看原始的符合HTTP标准的请求和响应头。Auth则可以查看授权Proxy-Authorization和 Authorization的相关信息。Cookies标签可以看到请求的cookie和响应的set-cookie头信息。

    AutoResponder

    可用于拦截某一请求,并重定向到本地的资源,或者使用Fiddler的内置响应。可用于调试服务器端代码而无需修改服务器端的代码和配置,因为拦截和重定向后,实际上访问的是本地的文件或者得到的是Fiddler的内置响应。有些时候在测试环境和线上环境的不同,导致在线系统的js难易跟踪调试特别是一些动态js脚本,该功能可以大大减少了在线调试的困难。

    勾选Enable rulesUnmatched requestpassthroughAdd Rule是创建规则(为了方便可以直接将左边的url拖拽到右边列表中)。下面第一个文本框是当前选择的url,在第二个文本框中选择Find a file...,选择本地保存后的文件。两者就建立了一一对应关系。

    例子如下:

    本地js中增加了alert

    使用AutoResponder后,调试10.33.30.219服务器代码

    这刚好是本地js的内容,说明请求已经成功被拦截到本地.当然也可以使用Fiddler的内置响应。下图是Fiddler支持的拦截重定向的方式:

    前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改。利用Fiddler的可以修改HTTP数据的特性,就能用本地文件替换线上css/javascript文件,基于生产环境修改并验证,确认后再发布。

    Filter

    Fiddler提供了多维度的过滤规则,足以满足日常开发调试的需求。host和zone过滤。可以过滤只显示intranet或则internet的HTTP请求也可以选择特定域名的HTTP请求; client process:可以捕获指定进程的请求

     

    3、使用Fiddler进行HTTP断点调试

     

    通过设置断点,Fiddler可以做到:

    1. 修改HTTP请求头信息。例如修改请求头的UA, Cookie, Referer 信息,通过“伪造”相应信息达到达到相应的目的(调试,模拟用户真实请求等)。

    2. 构造请求数据,突破表单的限制,随意提交数据。避免页面js和表单限制影响相关调试。

    3. 拦截响应数据,修改响应实体。

    假设js前端程序员和服务器程序员是分工合作的,js程序员想要调试Ajax请求的功能,这样便不必等待服务器端程序员开发好所有接口之后再开始开发js端的ajax请求功能,因为通过“模拟”真实的服务器端的响应,便可以保证功能的正确性,而服务器端开发程序员,只要保证最终的响应是符合规定的即可。这大大简化了程序开发的效率。

    有两种方法设置断点:

    1.fiddler菜单栏->rules->automatic Breakpoints->选择断点方式,这种方式下设定的断点会对之后的所有HTTP请求有效。

    有两个断点位置:

    a. before response。也就是发送请求之后,但是Fiddler代理中转之前,这时可以修改请求的数据。

    b.after response。也就是服务器响应之后,但是在Fiddler将响应中转给客户端之前。这时可以修改响应的结果。

    终止断点:在rules->auto breakpoint中disabled断点即可。

    2.命令行下输入。Bpafter xxx或者bpv,bpu,bpm等设置断点。这种断点只针对特定类型的请求。

    Bpu xxx,拦截请求数据并能进行修改。

    web再次访问文件,通过Fiddlerweb session界面可以看到,请求已经被挂起来了,而web浏览器也一直处于加载的状态。

    修改请求参数value值后,点击 “run to complete“,便可回送修改后的响应。

    终止断点:只需输入命令“bpu”。

    Bpafter xxx,拦截响应数据并能进行修改用法跟bpu命令一样。

    展开全文
  • 常见Web漏洞扫描分析工具

    千次阅读 2019-10-03 18:26:12
    常见Web漏洞扫描分析工具: (1)Acunetix Web Vulnerability Scanner(简称awvs) 是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,监测流行安全漏洞。 其推出力一个可以进行漏洞测试的网站: ...

    常见的Web漏洞扫描分析工具:
    (1)Acunetix Web Vulnerability Scanner(简称awvs)
    是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,监测流行安全漏洞。
    其推出力一个可以进行漏洞测试的网站:
    http://test.vulnweb.com
    功能:
    网站爬行、漏洞扫描、目标发现、子域名扫描、http编辑、http模糊测试、认证测试、网络服务扫描器、认证测试、网络服务扫描器、。。。功能
    需要学习的知识:
    漏洞扫描配置、sql注入利用、网络爬行讲解、网络目标发现、子域名扫描、http editor(编译http头)、http sniffer(抓抓包改包)、http fuzzer(网络测试)、http authentication(破解管理员登录密码)
    (2)Netsparker
    (3)Jsky
    (4)Appscan
    (5)WebCruiserWVS
    (6)safewvs
    (7)椰树
    (8)Burpsuite(kali中自带的工具)

    展开全文
  • 微信web开发工具调试h5 对于开发人员而言,时间始终是稀缺资源。 从苛刻的截止日期到多个项目,再到意外的要求,我们对时间的需求不断。 因此,我们一直在寻找有助于提高生产率的工具和流程。 在本文中,我们将研究...

    微信web开发工具调试h5

    对于开发人员而言,时间始终是稀缺资源。 从苛刻的截止日期到多个项目,再到意外的要求,我们对时间的需求不断。 因此,我们一直在寻找有助于提高生产率的工具和流程。 在本文中,我们将研究五个Web开发工具,它们可能会为您带来所需的额外生产力。

    1.使用Oh My Zsh掌握命令行

    Windows和OS X的默认命令行界面( Command PromptBash )难以学习并且难以自定义。 如果您不是专家,那么您最终可能会重复执行可以自动化的琐碎任务。

    噢,我的Zsh是在zsh之上构建的,开源的,社区驱动的框架。许多人发现,命令行框架比默认选项更容易和更好。 噢,我的Zsh提供了许多开箱即用的插件 (250)和主题 (140),使您可以根据自己的喜好自定义终端。 噢,我的Zsh速度更快,使用起来更舒适,并且可以让您轻松地自动执行日常任务。 由于命令行正逐渐成为每个Web开发人员工作流程的一部分,因此这可能是一种非常有效的工具,可以将其纳入您的日常工作中。

    在计算机上安装Oh My Zsh非常简单...

    $ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

    就像安装插件自定义主题一样。

    噢,我的Zish也拥有大量活跃的贡献者社区。 实际上, 已有1,500多人为该项目做出了贡献

    我使用该工具已有一年多了,我喜欢它如何简化我的工作流程以及它在终端中的工作变得多么容易。 使用“哦,我的Zsh”使我在命令行方面变得更加舒适和高效。 自动建议和别名特别加快了我的工作流程并提高了生产率。 我最喜欢的一些插件包括:

    • heroku: Heroku CLI的自动完成
    • zsh-autosuggestions:auto建议使用以前的任何命令。
    • NPM:自动完成和别名NPM

    2.使用失眠症即时测试API

    测试REST端点可能很麻烦,耗时且令人困惑。 Insomnia是一个免费的开放源代码,跨平台的GraphQL和REST客户端,它不仅功能强大,而且还具有直观,简单的UI,可简化测试并简化我的一天。 一些失眠功能包括:

    • 代码段生成:失眠可以为20多种不同的语言生成客户端代码,包括NodeJS,Go,Swift,Python,Java,C。
    • 插件系统:通过插件系统,您可以扩展Insomnia的功能。 您可以创建用于呈现自定义值的自定义模板标签,也可以使用Plugins API创建自定义颜色主题。
    • 环境变量:这些是可重用的值,可在失眠症的任何文本输入中使用。 一些常见的变量是基本URL,身份验证令牌和资源ID。


      失眠的主要好处之一是对GraphQL的支持。 下面的演示显示了查询GraphQL端点的典型工作流程。 在这个例子中,我送使用公共GraphQL API称为请求国家 。 传递URL时,失眠会自动生成架构。 在左侧发送查询后,它将在右侧返回响应。

      该应用程序附带许多有用的功能,可以简化您的工作流程。 例如,在这里我们可以看到使用环境变量的能力。

      使用API​​时,通常会在多个请求中重复相同的值。 手动执行此任务可能很耗时且困难。 使用环境变量可以允许您定义一个值,然后在需要的地方引用该值,从而解决了此问题。

      3.通过集线器增强Git超级能力

      我们大多数人在GitHub上花费很多时间。 Hub是一个命令行工具,可帮助您执行日常GitHub任务,而无需不断从终端来回切换。 Hub打包git并使用其他功能对其进行扩展,包括克隆存储库,列出最新的未解决问题以及通过Gist共享日志或代码段。 Hub不仅使使用GitHub变得更容易,而且通过将所有工具整合到一个环境中来提高生产力。

      您可以使用集线器执行大量命令和操作。 这是安装命令的完整列表 。 您还可以通过在终端上运行命令man hub来找到列表。

      4.使用DevDocs访问离线文档

      我们都使用文档。 (我们中的一些人相当多!)当您使用多种技术的堆栈时,在一组文档之间不断地来回切换可能既费时又不方便。 DevDocs解决了这个问题。 DevDocs是一个免费的开放源代码工具,可在一个干净且井井有条的Web UI中一次浏览多种编程语言和开发工具文档。

      DevDocs提供:

      • 即时搜寻
      • 离线支持
      • 移动支持
      • 黑暗主题
      • 键盘快捷键
      • 和更多

      DevDocs使阅读和搜索参考文档变得快速,容易,可访问和愉快。 而且,由于可以离线支持150多个项目,因此您无需担心保持与Internet的连接。 使用多种语言或工具时,此工具特别有用。 例如,我广泛使用它来同时阅读和搜索Vue和Cypress的文档。

      5.使用SVGOMG缩放SVG图像

      最后,将齿轮转换为更实用的工具,我们有了SVGOMG-免费的在线工具,用于优化SVG文件。 SVG(可缩放矢量图形)图像优于其他格式(例如PNG或JPG),因为它们能够缩放并在各种设备和屏幕尺寸上保持响应。 使用SVG的一个缺点是,由于冗余信息(例如编辑器元数据,注释,隐藏的元素以及默认值或非最佳值),文件可能会变得很大。 SVGOMG是安全删除和优化此数据以减小文件大小的工具。

      上图显示了典型场景,其中SVG文件已优化69.42%。 这是一个非常简单的工具,但是它可以帮助提高网站的整体性能并避免网页上出现膨胀。 SVGOMGSVGO(Optimizer)的UI实现,它是基于node.js的命令行工具。

      结论

      寻找改善我们工作方式的方法很重要。 通过利用上述工具,您可以提高生产力并简化工作流程。 开始确定可帮助您自动化工作流程的工具的优先级,您将获得节省时间和提高生产率的回报。

      翻译自: https://hackernoon.com/5-web-dev-tools-to-improve-your-productivity-gp163wmi

      微信web开发工具调试h5

      展开全文
    • 常见Web渗透测试工具

      千次阅读 2018-02-01 16:38:42
      一、渗透测试工具nmap,查看网站服务器开放的端口 1、查看服务器上运行的服务 $ nmap -sV hack-test.com 2、查看操作系统版本 $ nmap -O hack-test.com 二、使用Nikto来收集漏洞信息 #官方网站:...
    • web前端Chrome调试常见操作

      千次阅读 2018-03-11 00:21:45
      引言 在web前端代码编写时,需要...调试工具有两种方式打开:一种是鼠标右键——检查,另一种是按F12 调试工具的右上角的“三个点”样子的按钮,点击可以选择调试工具在右边或者下面或者其他方式显示 dom元素调...
    • web常见的bug调试总结

      千次阅读 2016-12-14 21:34:48
      前言​ 在web应用中,我们可能会遇到各种各样的bug,导致结果达不到我们的预期,我在项目开发的过程中,对bug从来都不怕,因为我知道这些bug或许就是自己成长的不可或缺的一部分.今天我会总结一部分的bug现象和解决方法,...
    • 很多想学习Web前端的同学在这之前对行业了解的并不多,因此在Web前端开发工具的选择上难免会显得有些力不从心。虽然网络上有很多推荐,但对于新手小白来说并不知道如何下手。为了解决这个问题,小千就给大家介绍五款...
    • Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助。 Fiddler的...
    • whistle--全新的跨平台web调试工具

      万次阅读 2016-11-07 18:38:14
      版权声明:本文由吴文斌原创文章,转载请注明出处:  文章原文链接:... ... whistle是基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler+Willow,基于Java实现的
    • WebAPI接口调试技巧

      万次阅读 2017-09-05 17:01:45
      跟踪工具:IE11 请求方式:POST 请求URL:IP:Port/Application/Controller/ActionName/Parameters 请求参数:一串由JSON对象转化而成的字符串 响应状态:200(OK) 响应结果: 一串JSON格式的数据 响应类型:...
    • 这是作者网络安全自学教程系列,主要...这篇文章将讲解逆向分析OllyDbg动态调试工具的基本用法,包括界面介绍、常用快捷键和TraceMe案例分析。基础性文章,希望对您有所帮助,如果存在错误或不足之处,还望告知,加油!
    • C#进阶系列——WebApi 接口测试工具:WebApiTestClient 阅读目录 一、WebApiTestClient介绍 二、WebApiTestClient展示 三、WebApiTestClient使用 1、如何引入组件 2、如何使用组件 四、总结   正文 ...
    • 宇宙最强API接口调试工具Apipost

      千次阅读 2022-05-05 14:03:56
      一、Apipost背景介绍 对于开发和测试同学来说,最重要的是有一款量身定制的接口调试工具,俗话说:磨刀不误砍柴工。有一款好的调试工具,可以让我们的开发工作事半功倍。 Apipost是一款支持后端、前端、测试同时在线...
    • 接口调试工具 Postman 使用详解

      千次阅读 2021-03-18 11:43:06
      在我们开发web项目的时候,很多时候需要测试自己的接口,在没有接口调试工具之前,程序员们只能自己开发一个简单的页面,然后填写参数进行调试,这样做费劲死了。 后来 Postman 公司开发出了一个谷歌插件,只需要...
    • Fiddler是最强大最好用的Web调试工具

      千次阅读 2017-01-13 17:50:05
      Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助。 阅读目录
    • 教你如何在移动端调试WEB页面

      万次阅读 2018-05-15 19:51:52
      很多调试工具和方法大家也都耳熟能详,比如Chrome开发者工具,firebug,等等。但是现在的应用场景,大多数都已经从PC端转向了移动端,而真机实测部分出现错误,我们如何调试呢?下面给大家介绍三种方式,帮你轻松...
    • 本文是对一些顶级 Web 开发工具的一次精选汇总,分别介绍了每款工具的关键特性,并已附上下载链接。 1. Novi Builder Novi Builder 是一个拖放式构建器,它对于经验丰富的 Web 开发人员而言是一个不错的选择。它为...
    • Linux调试工具

      万次阅读 2016-03-10 19:11:46
      1. 使用printf调试 #ifdef DEBUG Printf(“valriable x has value = %d\n”, x) #endif 然后在编译选项中加入-DDEBUG 更复杂的调试应用如: #define BASIC_DEBUG 1 #define EXTRA_DEBUG 2...
    • 这是作者网络安全自学教程系列,主要是关于安全工具和实践操作的在线笔记,特分享出来与...这篇文章将讲解逆向分析之OllyDbg动态调试工具,包括INT3断点、反调试、硬件断点和内存断点。基础性文章,希望对您有所帮助。
    • 常用的前端调试工具

      千次阅读 2017-05-10 14:53:20
      常用的前端调试工具 在做前端开发时,我们需要用到一些调试工具用来调试我们的HTML、CSS或者JS代码,俗话说预先善其事必先利其器,这里我给大家推荐几款比较常用的前端调试工具。 1、Chrome的开发者工具 这...
    • 如何使用浏览器的F12开发者工具调试页面?

      万次阅读 多人点赞 2018-05-27 22:25:23
      通常前端程序员在按照UI效果图编辑网页时,不可能一口将全部的代码全部写好,通常情况是编写边调,经过反反复复的调试后才能达到要求的效果,这时候用Chrome浏览器的F12开发者工具能形象直观的帮助程序员调试自己的...
    • 几种常见web 容器比较

      万次阅读 2018-10-25 22:32:08
      web 容器比较 tomcat jboss resin weblogic websphere glassfish Tomcat是Apache鼎力支持的Java Web应用服务器,由于它优秀的稳定性以及丰富的文档资料,广泛的使用人群,从而在开源领域受到最广泛的青睐。- ...
    • 10大Web漏洞扫描工具

      千次阅读 2020-05-28 17:04:51
      Web scan tool 推荐10大Web漏洞扫描程序 Nikto 这是一个开源的Web服务器扫描程序,它可以对Web服务器的多种项目(包括3500个潜在的危险文件/CGI,以及超过900个服务器版本,还有250多个服务器上的版本特定问题)进行...
    • Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助。 阅读目录 ...
    • 他们都是HTTP的神器级调试工具,非常非常的好用。好工具能让你事半功倍,基本上,我是属于彻头彻尾的工具控。  假如有一天,你写“传统”的PHP有些累了,想玩玩socket了,搞搞python、NodeJS、GO之类的新兴语言或...
    • 2022软件测试常见抓包工具

      千次阅读 2022-04-09 16:16:56
      常见抓包工具 HTTP抓包工具:Fiddler、Charles、Firebug、开发者工具等等。。。 Chrome开发者工具简单演示 打开Chrome 浏览器,按下F12快捷打开Chrome开发者工具 点击Network 标签 勾选 Preserve log...

    空空如也

    空空如也

    1 2 3 4 5 ... 20
    收藏数 77,062
    精华内容 30,824
    关键字:

    常见的web调试工具