Firebug是网页开发的利器,能够极大地提升工作效率。 但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它的高级用法。...=================================== Firebug控制台详解 作者:阮一峰 ?...控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。...十、属性菜单 控制台面板的名称后面,有一个倒三角,点击后会显示属性菜单。 ? 默认情况下,控制台只显示Javascript错误。...[参考文献] * Firebug Tutorial - Logging, Profiling and CommandLine (Part I) * Firebug Tutorial - Logging,
简介 FireBug备受推崇的一个原因就是对于JS调试; 界面功能 启用JS调试功能 选择哪些脚本可以展示 所有旁边那个下拉菜单可以更细化的选择哪个JS文件,支持筛选 调试进入按钮(四个按钮依次解释...console.log(“我是日志信息%s,毫无色彩可言–我支持多个参数打印”,”啦啦啦德玛西亚”); console.groupEnd(); 还有一个清空命令,console.clear()或者直接在控制台输入
目录 一、安装Firebug 二、打开和关闭Firebug 三、Firebug窗口概览 四、随时编辑页面 五、用Firebug处理CSS 六、盒状模型 七、评估下载速度 八、DOM 九、...Javascript调试 十、AJAX 十一、附注 一、安装Firebug Firebug在Firefox浏览器中运行。...另外有一个Firebug lite版本,可以通过javascript调用,包含在页面中,从而在其他非Firefox浏览器中使用。本文不涉及这个版本。 安装Firebug,请访问Firebug下载页面。...二、打开和关闭Firebug 在Firebug网站上,可以找到它的快捷键设置。...Firebug的相关设置: * 固定Firebug在新窗口打开:先打开firebug,点击左上角的bug标志,选择options菜单中的"Always Open in New Window
最近Firebug 2.0发布了, 兼容 Firefox 30-32。 打开Firebug: Firebug new ui UI变得清新了不少。...Firebug2.0新功能还蛮多的,这里我只介绍吸引我的新功能。所有的新功能见 Firebug博客。 格式化显示js 格式化显示js 妈妈再也不用担心我看压缩的js了。
2016-05-0418:42:36 发表评论 154℃热度 Firebug 这里是内容 它是WEB调试工具之一,是网页浏览器 Firefox 下的一款开发类插件。...它集HTML查看和编辑、JS控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。...掌握Firebug的使用,可从各个不同的角度剖析Web页面内部的细节,给Web开发带来极大的便利。...Firebug的更多高级使用方法,所以查找资料学习进阶,不进前端可以用到,就算是后端也可以用到,多多学习,增长知识!...慕课网的学习视频: image.png SEO在网页制作中的应用: image.png 文件下载 WEB调试工具---firebug 139.21MB
Commandlinie是Firebug中总有用的一个特性。...Firebug中的命令行更像“Immediate Window”,你能够在任何时候检测代码中的值,firebug命令行的一个好处就是可以在”设计时“ 就查看代码。...另外还有一个优点就是你可以在命令行写js语句并且让他们立刻执行。...清除控制台的内容,就像在Javascript中使用Console.clear()一样。 8、inspect(object [,TabName])。 ...这个就和console.profile()是一样的,用来记录页面中js的执行情况 并在结束后给出分析报告。 最后,希望每一位使用firebug来开发的同学,能够提高自己的开发效率。
3、利用控制台特性改写对象toString 对于一些浏览器,如果控制台输出的是对象,则保留对象的引用,每次打开控制台的时候,如果对象类型是function、date等(以前还有regexp,现在已失效)...//或执行一段死循环 window.open("about:blank", "_self"); } console.log('', devtools); 激活成功教程:可通过标签注入js...4、利用控制台特性进行监听dom属性 大部分浏览器在打印dom元素的时候,如果控制台处于关闭状态,不会获取元素属性,但是如果控制台处于开启状态,就会自动获取dom属性,从而触发监听事件 function...除了使用console.log,我们还可以使用console.info,console.dir和console.error等等,需要注意的是ie不支持console.table 激活成功教程:通过标签注入js...this.observerF() : this.observer(); } } ConsoleManager.init() 激活成功教程:通过标签注入js代码清空控制台、取消console.log
console.error():向控制台中写入错误信息,带错误图标显示和高亮代码链接; console.info():向控制台中写入提示信息,带信息图标显示和高亮代码链接; console.warn...():向控制台中写入警告信息,带警告图标显示和高亮代码链接; consle打印字符串支持字符串替换,使用起来就像c里面的printf(“%s",a),支持的类型包括: %s ...console.assert()可以用来判断一个表达式是否正确,如果错误,他就会打印错误信息在控制台窗口中。 5、追踪(console.trace())。 ...[参考资料] 1、Firebug Tutorial http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i...2、Firebug Tutorial http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii
我们使用了导入证书的方法添加信任链接,有网友反映说证书导入不成功,这里用另外一种方法来实现:用firebug给firefox添加信任连接 打开微信公众平台 - 统计 - 用户分析,一如既往的显示“此连接不受信任...”,这时我们按F12调用firebug查看元素,切换到html,用firebug菜单栏中的第二个菜单“点击查看页面中的元素”,定位到具体的位置 展开div元素,复制上图中的绿色框中的链接, https...ll1D85fGDCTr4AAxC_RrFIsraM1eajMksOjZN_eXodpjY4fYF5CrJfr2Boq-sCnFVnrjmnvRJFH8ARnpkI8F9QBFc64dn2dthrf3Fy5W3T0b-g0Wi9_iwDI49sUaxQaM&devtype=3&jsurl=https://res.wx.qq.com/mpres/zh_CN/htmledition/js.../common/wx/iframe1cd20f.js&version=2 在新窗口或新标签中打开链接,点击“我已充分了解可能的风险”,再单击“添加例外” 返回微信公众平台统计分析,看看“此连接不受信任
简介 Firebug是Firefox下一款知名的插件,目前稳定版本是2.X,alpha版本是3.X(装了.完全看不懂–适用于FF44+,也就是测试版本); 功能主要用于调试网页中的错误,修改代码及实时查看效果...; 目前只有在Firefox下的firebug才能体验它的强大支出,,对于其他浏览器,lite版本功能阉割太多; 但是吧,就其他浏览器而言,chrome自带的已经足够强大,IE11自带的也挺不错的…...获取及安装 打开方式 F12可以打开工具界面 Ctrl + F12可以独立出一个功能的网页 Firebug窗口功能简介 功能 控制台:JavaScript命令行操作、显示JS错误信息、提示信息、日志信息...,右侧可写自己的JS命令。
在js中右中全局方法可以在控制台console中打印信息: 1、console.log(123); 2、console.info(456); 3、console.warn(666); 4、console.error
题外话 这篇作为firebug系列的结束贴; 四篇博文应该让一些小伙伴对firebug有了基本的认识和操作 网络 菜单依次解释 暂停符号:在XHR( XMLHttpRequests)处暂停也就是监听...,点击这个按钮后,发起异步请求时中断js执行,并跳转到script面板,标识出相应的代码 清除:清除当前获取的资源信息 保持:保存当前获取的信息,刷新依旧存在 全部是汇总所有资源信息,后面的都是针对性的筛选信息
使用方法: 1、右键点击我,把我添加早收藏夹 2、在任意页面点击刚才添加的收藏,然后等一会,就会在页面右下角看到一个firebug的小按钮,然后点击它即可。...附: 如果你想让页面默认就有一个firebug的小按钮进行调试,那直接加一句: ...... ......不过总的来说,firebug for ie还是解决了我们在IE上检查样式及代码提供了一个很好的工具。
人生不过几十年,每一年都值得纪念和祝福,所以我想用 Node.js 控制台动画送上一份我的新年祝福:http://mpvideo.qpic.cn/0bc3mqaaqaaakaao5vooorqvazgdbbsaacaa.f10002...实现原理 动画都需要一帧帧的刷新,控制台动画也不例外。 那控制台是怎么刷新的呢? 控制台中有一种叫做 TTY,特点是可以设置颜色,可以清除或修改某个位置的内容。...Node.js 里面可以通过 process.stdout.isTTY 来查看是否是 TTY 类型的标准输出流,然后提供了 readline 这个包来操作它。...小结一下: TTY 类型的控制台可以设置颜色、可以在任意位置清除和修改内容,这是控制台动画能一帧帧刷新的基础,Node.js 提供了 readline 模块来做这些。...其中,控制台的光标位置修改和内容的清除使用 Node.js 的 readline 内置模块,其余的是第三方的包。
控制台的常用命令 操作控制台相关的命令需要悬浮窗权限。 1. 显示控制台悬浮窗; console.show() 2. 隐藏控制台悬浮窗; console.hide() 3. ...清空控制台悬浮窗; console.clear() 2. 控制台输出信息的几种方式 1. 打印到控制台,并带上换行符, 可以传入多个参数; console.log() 此函数可以作为全局函数使用。...打印到控制台,同时会调用这个函数所在的调用栈信息; console.trace() 3. 控制台信息的输出样式 1....控制台的大小和位置设置 1....设置控制台的大小,单位像素; console.setSize(width, height) console.show(); sleep(2000); // 设置控制台大小为屏幕的四分之一 console.setSize
火狐升级到51后,firebug的console.log("sbfirefox")不输出任何东西 console.log("sbfirefox") 把firebug禁用,然后按F12用火狐自带的浏览器调试工具
做前端开发的朋友应该对FireFox再熟悉不过了,FireFox有一个附加组件FireBug。...在HTML中可以直接写 console.log("test"); 这样在底部的控制台就能直接看到输出的值,他的作用就好像...我们在Silverlight中就可以直接调用这个js方法实现调试。...= null) { console.InvokeSelf(str); } } 附录: 在firefox中安装FireBug
打印字符串和对象; 可展开对象查看内部情况; 看一下console对象本身的定义情况; 输出对象情况; utag对象所在文件; 输出对象; 二 Console.log 总结 1 如果你js...2 之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log...今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log。...比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能。...四、使用其它日志级别 除了console.log(),Firebug还支持多种不同的日志级别:debug、info、warn、error。
Console是用于显示JS和DOM对象信息的单独窗口。并且向JS中注入1个 Console 对象,使用该对象可以输出信息到Console窗口中。 什么浏览器支持console?...很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支 持不好。...Safari、Opera 都支持 Console,但使用上都没有 FireBug和 Chrome 的方便。...现在firebug推出了firebuglite工具,可以让所有浏览器都支持Console功能,而且使用上和FireBug 几乎一样。 为什么不直接使用 alert 或自己写的 log?...支持 console.clear 该方法会清空 console 控制台中的所有信息 console.dirxml 显示网页的某个节点(node)所包含的html/xml代码 <
Print.js 官网 官网 优点:可以打印多种格式的内容(pdf、json、html等) 打印json时可以添加表头。...一、vue安装命令: npm install print-js –save 二、引入 这个引入不需要在main.js中,直接在使用的.vue中引入即可 这里颜色虽然是灰色,但是也要添加,否则会报错。
领取专属 10元无门槛券
手把手带您无忧上云