web调试_浏览器调试websocket - CSDN
精华内容
参与话题
  • web前端Chrome调试常见操作

    千次阅读 2018-03-11 00:21:45
    web前端代码编写时,需要使用谷歌浏览器调试页面;谷歌浏览器在css和js上具有完整的提示功能,在需要查询某个属性或者函数是否能用时,可以直接在谷歌浏览器中试验。 下面总结自己工作中常用技巧。 调试工具打开...

    引言

    在web前端代码编写时,需要使用谷歌浏览器调试页面;谷歌浏览器在css和js上具有完整的提示功能,在需要查询某个属性或者函数是否能用时,可以直接在谷歌浏览器中试验。
    下面总结自己工作中常用技巧。

    调试工具打开

    1. 调试工具有两种方式打开:一种是鼠标右键——检查,另一种是按F12
    2. 调试工具的右上角的“三个点”样子的按钮,点击可以选择调试工具在右边或者下面或者其他方式显示

    dom元素调试

    1. 在打开的调试工具中的最上面一栏,选择Element,则可以看到当前页的dom结构
    2. 在Element中,划到哪个元素就可以在页面对应位置看到相关选中效果;对应的一个操作,点击调试工具的左上角的箭头,然后在页面中点击,则可以查看页面点击元素在Element中的位置
    3. 在Element中,点击选中某个元素,直接键盘按 backspace或者delete就可以直接删除,在排除某个样式影响错误的时候,可以这样快速定位到错误
    4. 在Element中,双击标签名称,可以改变标签名;双击属性,可以选中修改属性,复制;双击内容可以修改内容;选中整个标签元素,右键——“Edit as Html”或者直接F2可以修改整句标签,包括标签名、属性、内容等,一般测试滚动样式是否正常时,直接选中
    5. 标签,复制粘贴达到迅速获得较多内容出现滚动

    css样式调试

    1. 选中dom元素时,在Styles栏可以看到该元素的所有样式设置,包括继承得到的样式,覆盖和被覆盖的样式情况;在Styles栏旁边有个Computed按钮,点击可以看到该元素经过计算后,真正生效的样式列表
    2. 在Styles栏中,双击可以修改样式;点击大括号{}中最后一个样式的下面可以新添加样式;选中某个样式名字或者值,删除为空,可以删除样式
    3. 调整属性中的数字时,选中,按向上或者向下可以实现+1或-1的调整
    4. 双击选中某个属性后,回车可以切换不断向下切换选中的样式
    5. 点击颜色显示的那个标识可以打开颜色的修改设置

    Console中调试

    1. Console里面可以进行编程序,提示功能十分强大,常用于测试一些拿不准的判断或者功能函数,也可以查询API
    2. 当Console里面有报错时,可以直接点击定位错误,这是自动跳转到Sources栏,这一栏可以断点调试,快捷键主要使用F8(从当前断点向下继续执行直到下一个断点)、F10(从当前中断地向下执行一步)、F11(进入某个函数中一步一步执行)。使用webpack压缩打包时,开启sourcemap可以映射到未压缩前的代码中调试。

    NetWork中调试

    1. 这里在刚打开时,可能什么都没有,需要重新刷新页面,得到加载资源的顺序、体积大小和时间消耗等信息。
    2. 在上面有一栏加载资源的分类,有All,XHR、JS、CSS、Img… 。其中,常用的是XHR,因为要查看ajax请求,点击后,在Header栏可以查看此次请求的首部信息,在Response栏可以看到服务器返回信息

    Application中查看保存信息

    在该栏可以查看cookie、localStorage等信息

    展开全文
  • 几款web调试工具

    2013-09-10 15:21:16
    只要是设计开发,就需要进行调试,尽管相对来说,前端的调试要简单一些,但使用一些调试工具或插件还是能提高你的工作效率。下面是一些主要用于IE浏览器环境和firefox浏览器环境等的调试工具简介。 一、IE网页...

    只要是设计开发,就需要进行调试,尽管相对来说,前端的调试要简单一些,但使用一些调试工具或插件还是能提高你的工作效率。下面是一些主要用于IE浏览器环境和firefox浏览器环境等的调试工具简介。

    一、IE网页调试插件

    IE Developer Toolsbar

    IE下的FireBug。htmlCSS调试工具。.该产品让开发人员能够深入探索和理解Web页面,帮助开发者更好地创建Web应用.安装后可以在IE中快速分析网页的软件.该工具条可集成在IE窗口,或以浮动窗口形式存在.

    IE Developer Toolbar 的特性如下:

    • 浏览和修改Web页的文档对象模型(DOM).
    • 通过多种技术方式定位、选定Web页上的特定元素.
    • 禁止或激活IE设置.
    • 查看HTML对象的类名、ID,以及类似链接路径、tab顺序、快捷键等细节

    Microsoft Script Debugger

    Microsoft(R) Script Debugger 是扩展所有 Microsoft(R) ActiveX(R) Scripting 主机应用程序的调试环境—例如 Microsoft(R) Internet Explorer (IE) 或 Microsoft(R) Internet Information Server (IIS)。

    与 IE 和 IIS 联合使用时,Web 开发人员可在客户机和服务器上浏览、编辑和调试带脚本的 HTML 页(.htm、.html 和 .asp 文件)。Script Debugger 使开发人员更加有效地开发脚本应用程序。

    Companion.JS

    IE下的javascript调试工具。请注意,这可不是一个js文件,而是一个名字,它是作为ie的插件来安装使用的,而且需要结合Microsoft Script Debugger使用,通过安装这个工具,但页面出现错误时会在左上角弹出一个小错误提示,点击会在IE下面显示出一个错误控制台,就如FF下的 firebug控制台一样。错误信息提示很详细。via

    SuperPreview

    SuperPreview是微软发布的网页开发调试工具,自带有很多元素查看工具,如箭头、移动、辅助线、对比……,在查看网页的IE6/IE7/IE8不同表现的同时,可以对比效果。

    IETester

    同时拥有IE6、IE7、IE8(Vista兼容)。查看之前的详细介绍 – IETester: IE兼容性测试软件.

    二、firefox网页调试插件

    FireBug

    Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。要查阅文档、截图和论坛请访问Firebug的网站:http://www.getfirebug.com.

    Web Developer

    Web Developer作为FF的插件存在,主要功能表现在几个重要的方面:

    对页面中的文本、图像、媒体文件进行控制,对网页所应用的CSS文件的id与class辅助查看,表格辅助查看,可以实现修改CSS文件实时显示出得到的页面效果等等。

    Web Developer插件能够帮助我们对CSS网站进行分析,我们使用FF对网页进行浏览,运用Web Developer插件不仅仅只是能看到对方的源代码,还能方便的分析出页面的布局结构,CSS书写方式,鼠标所在位置的id或class是什么等等,使 我们能迅速的理解、学习别人的成功经验,进而更加方便快捷的掌握CSS布局技术。via

    YSlow

    YSlow是yahoo美国开发的一个页面评分插件,基于Firebug,  非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。YSlow从Firebug收集当前网页和该网页的访问信息后进行分析,如有必要则给出如何提高页面加载速度的建议,比如减少DNS查询,使用外部并压缩Javascript等。via

    Javascript Debugger

    FireFox下的javascript调试工具,比FireBug有更强大的调试功能.

    三、其它

    Opera Developer Tools

    Opera下的DOM,CSS查看工具,类似FireBug.

    webkit

    Safari下的开发调试工具

    Fiddler

    一个很强大的http流查看工具

    Httpwatch

    数据分析工具,头消息接受/发送的查看,POST数据查看.等等。

    展开全文
  • Web应用的调试

    2007-02-07 16:26:28
    虽然是用TOMCAT做为Web Container,但是调试的时候,经常重新启动也觉的麻烦,所以总想寻找写好办法简化调试 如果调试jsp页面,那么修改后可以立即生效,所以比较简单 至于控制器,如果不在控制器写业务代码,那么...

    虽然是用TOMCAT做为Web Container,但是调试的时候,经常重新启动也觉的麻烦,所以总想寻找写好办法简化调试

    如果调试jsp页面,那么修改后可以立即生效,所以比较简单
    至于控制器,如果不在控制器写业务代码,那么控制器也没什么好调试的
    业务代码写到service类中,那么由于这些service可以脱离容器运行,所以采用单元调试就很方便,要这样
    做,层次结构要分清楚,不要因为业务逻辑简单就把逻辑写在控制器中。

    展开全文
  • javaWeb调试

    2018-05-10 13:45:04
    note1html调试HTML源码IE10访问的效果note2CSS调试通过IE浏览器访问页面note3JavaScript调试(重要)通过IE浏览器访问页面,按F12 打开开发人员工具注意:JS是通过事件触发的,回到页面,点击按钮,触发JS函数监视窗口,可以...

    note

    1

    html调试

    HTML源码

    IE10访问的效果


    note

    2

    CSS调试

    通过IE浏览器访问页面

    note

    3

    JavaScript调试(重要)

    通过IE浏览器访问页面,按F12 打开开发人员工具

    注意:JS是通过事件触发的,回到页面,点击按钮,触发JS函数

    监视窗口,可以查看你想看的变量的值

    以上是调试逻辑错误,如果js语法有错误,看下面,

    js中,定义变量用var,不用int

     

     

    在Firefox中调试JS,要装firebug插件(安装参见附件)

    当页面有JS 语法错误时,会提示页面不包含JavaScript

    如何在Firefox下,找到JS哪里有语法错误呢?看下面

    在页面上,右键,重新载入,在firebug界面,会提示错误的脚本位置

    note

    4

    在Tomcat下调试Servlet(重要)

    第一步:Servlet里打断点

    第二步:

    选中工程,右键,debug AS MyEclipse Server Application

    Debug as 如果没有

    就选择Debug Configurations配置一个

    再打开浏览器,在地址栏输入你要访问的URL

    切换到debug视图,代码会在断点的地方停下来.

    结束


    note

    5

    附录:Firefox安装firebug插件

    注意要联网

    展开全文
  • web项目调试

    千次阅读 2018-08-15 15:43:33
    web项目调试 web项目往往由前端和后台组成,涉及的内容和知识特别多,初学者由于对其运行机制理解不到位,同时没有掌握恰当的调试方法,当项目出现问题时就比较茫然、无从下手。提高调试能力对于程序员来讲是至关...
  • web在线调试

    2019-07-09 19:45:53
    xx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...meta name="viewport" content="width=...
  • 这篇文章写得非常棒,可谓事无巨细。但是对我而言最重要的就是以下摘录的部分,其实文章里还有介绍端口转发(Port forwarding)以及虚拟主机映射(Virtual hostmapping)的内容,如果需要的话,不妨阅读一下原文。
  • web调试代理工具Whistle

    千次阅读 2018-05-10 10:56:06
    由于最近在学习微信小程序开发,项目中用到了https代理请求,所以用到了基于Node实现的跨平台web调试代理工具Whistle,在此做一记录。完成https代理请求总共需要5个步骤。一、安装Node.js下载地址:...
  • Web开发经验谈之F12开发者工具/Web调试
  • Pycharm中对Django项目进行单步调试,打断点的web调试方式 在使用PyCharm开发Django程序的时候,使用打印日志调试程序的方式十分麻烦且不直观,可使用断点调试的方法: 1、打开你的工程,在菜单栏里找到Run–>...
  • web调试工具-Fiddler使用(一)

    千次阅读 2016-01-14 16:32:11
     Fiddler是一款优秀的web调试工具,它可以记录所有的浏览器与服务器之间的通信信息(HTTP和HTTPS),并且允许你设置断点,修改输入/输出数据。  你对HTTP协议越了解,就越能掌握Fiddler工具使用方法,你越使用...
  • VS2005进行Web调试的浏览器选择更改

    千次阅读 2008-04-04 04:35:00
    VS2005进行Web调试的浏览器选择 不幸,安装了firefox后,安装VS2005,VS进行web调试时就用了firefox而不是ie,这应该是默认浏览器搞的更改方法:打开 C:/Documents and Settings/Administrator/Local Settings/...
  • web 调试 log 输出

    千次阅读 2014-05-22 12:09:15
    你可以使用控制台的Javascript方法调试你的web app如果是在定制的WebView中调试,你需要实现一个回调方法来处理调试信息 文档内容 在Android Browser中使用控制台API 在WebView中使用控制台API ...
  • WEB调试工具,神奇的console

    千次阅读 2016-09-22 10:00:56
    在浏览器面板按F12就可以进入调试界面,里面的很多功能对前段开发用处很大。Element:主要是用来调试网页中的html标签代码和css样式代码Network:查看网页的http通信情况,包括Method、Type、Timeline(网络请求的...
  • ios的web调试利器--weinre

    千次阅读 2014-12-13 22:13:16
    2 使用注入方式插入一个js到被调试web页面中。这个js会尽可能的拦截页面上的实现得到上层的数据,如ajax请求,但是像图片直接加载,之类是无法得到的。同时定时向服务器发心跳码,或是返回命令结果,这个见
  • 在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试DOM 断点debugger断点native方法hook远程映射本地调试 Weinre 在移动上面开发调试是很复杂的,所以就有了...
  • apache+wsgi+python的web调试

    千次阅读 2013-10-29 20:28:48
    怎么调试呢? 这里给出2个方法。 一. 直接输出到浏览器 这中方法最直接,直接把想查看的一些变量什么的,变成html的元素输出,让后用过浏览器访问对应的页面就能看到了。 二. 通过wsgi.errors输出到apache的...
  • Whistle强大的WEB调试代理工具

    万次阅读 2019-09-25 11:09:40
    whistle(读音[ˈwɪsəl],拼音[wēisǒu])基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler,主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用,...
  • Server > VM options 设置为 -Dfile.encoding=UTF-8 ,重启tomcat
  • Web移动应用调试工具——Weinre

    万次阅读 热门讨论 2011-04-07 16:09:00
    但是手机上并没有称心如意的调试工具(如Firebug、web inspector),重新设计界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。 Weinre是什么?Weinre代表We b In spector Re...
1 2 3 4 5 ... 20
收藏数 334,058
精华内容 133,623
关键字:

web调试