前端调试工具

一般使用chrome 或者 firefox 进行调试

chrome直接F12打开web控制台

火狐要在选项中的开发者工具 - web控制台进行打开

以下以谷歌为例

在console选项中，可以直接输入js语句

断点调试

点开JS文件在 source选项中，看见右边有这个控制按钮，分别功能：进入debug调试，跳过下一句，进入下一步，进入上一步，禁用断点，？？

有些JS上线后会被打包压缩，点击源码下面的括号，进行格式化，方便插入断点

另外也可以在源文件中，加入console.log(""); 或者 console.error(""); 进行提示

resources选项中保存的是所有离线资源

时间： 2024-10-25 19:03:37

前端调试工具的相关文章

工欲善其事之 Web 前端调试工具格式化混淆过的 JS 代码

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议转载请保留此句:太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. FireBug: inline code 不能格式化外部 js 可以格式化 Chrome: 点完这对大括号,会新生成一个文件,是格式化过的. 工

BrowserSync前端调试工具使用

上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便的,看到一位仁兄介绍的BrowserSync,于是看看了,感觉还行吧.它主要是用来同步更新的,比如文件修改了,浏览器会自动刷新,以及还有一点好处就是,PC,移动端都是同步的,可惜的是没有调试工具,在Chrome调试工具里面调试的不会同步更新到手机端,要是这个可以就好了. 虽然没个调试工具,但我们可以

常用的前端调试工具

1.Chrome的开发工具 2.firefox 插件Firebug 3.IE的开发者工具 4.IETest,IE浏览器版本切换工具 5.Emmet http://www.emmet.io 6.JSON格式校验工具 7. JS压缩和解压缩工具 http://tool.oschina.net/jscompress 和 http://tool.css-js.com

前端调试工具Browser-sync(Windows)安装指南

Browser-sync是基于NODE.JS 所以必须先安装NODE.JS环境 1.官网下载NODE.JS 2.傻瓜式安装 3.开始菜单栏打开NODE.JS控制台 4.输入控制台指令npm install -g browser-sync即安装进行中 5.出现下图即安装成功 6.启动Browser-sync监听文件,如在E盘下创建一个text文件夹.文件夹下创建一个index.html文件.启动NODE.JS控制台,如图,即可监控成功! 原文地址:https://www.cnblogs.com/f

（七）JavaScript之[调试]与[前端表单验证]

12].调试为什么要去调试?1.在编写JavaScript时,如果没有调试工具将是一件很痛苦的事情.2.没有调试工具是很难去编写JavaScript程序的.3.编写的代码可能包含语法错误.逻辑错误,如果不借助调试工具,这些错误很难去发现4.帮助找到错误信息的位置通常,在编写一个新的JavaScript代码过程中都会发生错误代码调试:在程序代码中寻找错误 console.log()我用的chrome浏览器[控制台console等]进行调试,因为chrome的开发者工具是最好的前端调试工具deb

分享我收集的前端好资源：网址、文章、工具、框架、电子书

分享我收集的前端好资源:网址.文章.工具.框架.电子书前言开始全职前端开发已经9个月了,在这9个月中收集了一还自认为还不错的资源,整理在了一个小网站上(http://www.cnfeinfo.com/),现在分享出来,希望对各位前端攻城师有用. 如果看了本文后,觉得这些资源还不错,对你有所帮助,别忘了“推荐”一下哦,能帮到大家是我最大的动力,谢谢! 前端好网址 CSS3动画参考提供CSS3的案例.动画手册和CSS3动画生成工具张鑫旭-鑫空间-鑫生活张鑫旭个人博客,主要为web前端方向的

Web前端开发（高级）下册-目录

多媒体与绘图多媒体音频格式视频格式 HTML5多媒体支持 <audio>和<video> htmlaudioElement和htmlVideoElement <audio>和<video>的事件 html5的绘图支持 <canvas>元素绘制图形绘制几何图形绘制路径绘制字符串清除绘制内容绘制阴影绘制位图变形 svg HTML5中使用svg svg的基本语法 svg内部标签几何图形标签路径标签文字标签 HTML5新特性

2019微专业初级前端开发工程师教程

目录:┣━━1前端入门┃ ┣━━第1章前端技术发展概述┃ ┃ ┗━━1前端技术发展概述.mp4┃ ┣━━第2章微专业课程体系概述┃ ┃ ┗━━2微专业课程体系概述.mp4┃ ┣━━第3章前端入门案例┃ ┃ ┗━━3前端入门案例.mp4┃ ┣━━第4章前端开发工具┃ ┃ ┣━━4.1前端开发工具概述.mp4┃ ┃ ┣━━4.2WebStorm.mp4┃ ┃ ┣━━4.2WebStorm参考资料.doc┃ ┃ ┣━━4.3Sublime Text 参考资料.doc┃ ┃ ┣━━4.3Subl

GitHub上整理的一些工具，求补充

http://segmentfault.com/q/1010000002404545 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 OSChina:开源技术社区,开源方面做的不错哦 cnblogs,51cto,csdn:常见的技术社区,各有专长 stackoverflow:IT技术问答网站 GitHub:全球最大的源代码管理平台,很多知名开源