当前位置: 代码迷 >> Web前端 >> (二)入门指南――(10)Firebug
  详细解决方案

(二)入门指南――(10)Firebug

热度:423   发布时间:2013-10-08 16:46:23.0
(2)入门指南――(10)Firebug

Up-to-date instructions for installing and using Firebug can be found on the project's home page at http://getfirebug.com/. The tool is too involved to explore in great detail here, but a survey of some of the most relevant features will be useful to us.

关于firebug的最新的安装使用说明可以在这个项目的首页http://getfirebug.com上找到,这个工具太复杂了以至于我们不能在这里展示很多细节,但是一些最常用的特点的总结对我们来说是很有用的。

Understanding these screenshots

Firebug is a quickly-evolving project, so the following screenshots may not exactly match your environment. Some of the labels and buttons are provided by the optional FireQuery add-on: http://firequery.binaryage.com/.

理解这些截屏
firebug是一个快速迭代的项目,因此下面的截屏可能和你的环境不是那么匹配。一些标签和按钮由可选的FireQuery插件提供:http://firequery.binaryage.com/

When Firebug is activated, a new panel appears offering information about the current page.

当firebug被激活后,一个新的面板将展示出来提供当前页面的信息。

In the default HTMLtab of this panel, we can see a representation of the page structure on the left side, and details of the selected element (such as the CSS rules that apply to it) on the right side. This tab is especially useful for investigating the structure of the page and debugging CSS issues, as shown in the following screenshot:

在面板的默认的html标签上,我们可一看到我们可以看到左侧的页面结构的呈现,和被选择元素的细节(比如应用在其上的css规则),这个标签页对研究页面的结构和调试css的问题是相当有用的,正如下面的截屏中展示的那样。

The Scripttab allows us to view the contents of all loaded scripts on the page, as shown in the preceding screenshot. By clicking on a line number, we can set a breakpoint; when the script reaches a line with a breakpoint, it will pause until we resume execution with a button click. On the right side of the page, we can enter a list of variables and expressions we wish to know the value of at any time.


Script标签页允许我们查看网页中所有的话加在的脚本的内容,正如之前的截屏展示的那样。通过点击行号,我们可以设置一个断点,当脚本执行到断点的那一行,他将会暂停,直到我们点击按钮继续执行。在这个页面的右侧,任何时候,我们都可以输入我们希望知道的一列变量和表达式

The Consoletab will be of most frequent use to us while learning jQuery, as shown in the following screenshot. A field at the bottom of the panel allows us to enter any JavaScript statement, and the result of the statement is then presented in the panel:


Console标签将使我们在学习jquery的时候使用的最多的标签,正如下面的截屏展示的那样。面板底部的文本区域允许我们输入任何js表达式,这个表达式的结果将会展现在面板上。

In this example, we have performed the same jQuery selector as in Listing 1.2, but have not performed any action on the selected elements. Even so, the statement gives us interesting information. We see that the result of the selector is a jQuery object pointing to two .poem-stanzaelements on the page. We can use this console feature to quickly try out jQuery code at any time, right from within the browser.

在这个例子中,我们已经在1.2列表中展示了相同的jquery选择器,但是还没有在被选择的元素上展示任何行为。尽管这样,这个表达式给了我们一个有趣的信息。我们看到选择器的结果是一个指向两个.poem-stanza元素的jquery对象。我们可以使用这个控制特点在任何时候直接在浏览器中快速的测试jquery代码。

In addition, we can interact with this console directly from our code, using the console.log()method, as follows:
$(document).ready(function() {
console.log('hello');
console.log(52);
console.log($('div.poem-stanza'));
});

另外,我们可以直接使用我们的代码直接影响控制面板,使用console.log()方法就可以了,如下:

$(document).ready(function() {
console.log('hello');
console.log(52);
console.log($('div.poem-stanza'));
});

This code illustrates that we can pass any kind of expression into the console.log()method. Simple values such as strings and numbers are printed directly, and more complicated values such as jQuery objects are nicely formatted for our inspection, as shown in the following screenshot:


这段代码说明了我们可以传递给console.log()任何种类的表达式,像字符串和数字这样的简单值将会直接被打印出来,像jquery对象这样的更加复杂的值将会以很好的格式呈现给我们,比如下面的截屏展示的那样:

This console.log()function (which works in each of the browser developer tools we mentioned) is a convenient alternative to the JavaScript alert()function, and will be very useful as we test our jQuery code.

console.log()方法(在我们提到的每一个浏览器的开发工具中都是可以使用的 )可以很方便的使用js的alert()方法替换,这对我们测试我们的jquery代码是很有用的。