zoukankan      html  css  js  c++  java
  • Firebug中你不该错过的几个功能

    Firebug是Firefox的一个扩展,提供了诸多网页开发的辅助功能,如果你是一个网页开发人员,天天要和HTML/CSS/Javascript打交道,Firebug能大大提高你的工作效率。
    Firebug的大部分功能都很直观,我最常使用的是Inspect CSS/DOM和Javascript debug,有时候会看看Net和YSlow。还有一些功能,或大或小,不是上来就发现,但也是非常好用,不容错过:

    获取XPATH

    无论做userscriptbookmarklet还是网页爬虫,有时候用五六行DOM实现的网页元素提取,用XPath一句就搞定了。以前定位一个元素的XPath主要靠眼,有Firebug就省眼了,先用Inspect定位网页元素,然后点右键,选Copy XPath,搞定。
    拷贝xpath
    这个XPath是从DOM树里来的,已经修正了网页上的一些错误,所以有时和实际的XPath有一些偏差,但一般都很容易调整。比如一些网页中table里没有tbody,直接就是表格内容,DOM树会自动补上tbody,得到的xpath中也会有tbody,在实际使用的时候,和网页实际内容对应,就要把tbody去掉。

    javascript命令行

    如果哪个脚本语言不提供带命令行的控制台(console),我就不玩了,:-p。善用命令行控制台(console),可以省下很多debug的时间。我以前介绍过jsenv。Firebug也提供非常好用的javascript命令行控制台,可以直接和当前网页交互,输入命令的时候还能自动补齐。另外,一定不要忘记先看看这个命令列表

    控制台API

    我最爱用的javascript函数就是alert,偶尔把它放在循环里,我可以花一下午的时间点OK玩。现在是和alert说byebye的时间了。Firebug提供了一套相当完备的javascript控制台API,可以将log直接输出到控制台而不再用跳出小窗口,提供多种log级别(debug,info,warn,error)和分组功能,可以显示对象属性,可以记录stack trace,甚至提供timer和profiler,调试performance都不用发愁了。记得查看控制台API的说明

    标尺

    无论在网页布局还是做动态HTML,常常需要知道一个网页元素的相对位置。你可以装一个Measueit扩展自己量,也可以用Firebug里的标尺。用Inspector选中你要度量的元素,在右侧选中Layout标签,然后鼠标划过盒模型中央,标尺就会出现。
    Firebugruler

    在所有浏览器中使用Firebug

    对不起,不是所有的功能,是不是有点失望。不过,至少你可以保证控制台API正常输出,并且提供命令行的支持,已经相当不错了。下载firebuglite文件,放在脚本目录下,然后在页面中加入:

    <script language="javascript" type="text/javascript"
    src="/path/to/firebug/firebug.js"></script>

    用F12就可以召唤出Firebug了。

  • 相关阅读:
    106. Construct Binary Tree from Inorder and Postorder Traversal
    105. Construct Binary Tree from Preorder and Inorder Traversal
    449. Serialize and Deserialize BST
    114. Flatten Binary Tree to Linked List
    199. Binary Tree Right Side View
    173. Binary Search Tree Iterator
    98. Validate Binary Search Tree
    965. Univalued Binary Tree
    589. N-ary Tree Preorder Traversal
    eclipse设置总结
  • 原文地址:https://www.cnblogs.com/sophie_wang/p/1615325.html
Copyright © 2011-2022 走看看