Firebug 调节和测试器开荒中的10个技能

10分钟学会前端调节和测量试验利器——FireBug

2015/09/17 · HTML5,
JavaScript · 1
评论 ·
调试

初稿出处:
惟吾德馨(@Allen_Bryant)   

时间:2011-02-20 10:05 来源:IT168 作者:网络 点击: 3158 次 【字号:大) 中) 小)】

什么是Firebug
从事了数年的Web开采专门的职业,更加的感到今后对WEB开垦有了更加高的必要。要写出能够的HTML代码;要编写制定精致的CSS样式表展现每一个页面模块;要调治javascript给页面增添部分更活跃的要素;要利用Ajax给客商带给更加好的心得。四个神乎其神的WEB开荒职员需求两全越多层面,才具交出豆蔻梢头份相通出彩的学业。为支援相近正处在Web2.0洪流中的开荒职员,在这里边为大家介绍风度翩翩款轻便灵活的扶持开辟工具。

概述

  FireBug是叁个用来网址前端开辟的工具,它是FireFox浏览器的三个扩张插件。它能够用来调节和测验JavaScript、查看DOM、剖析CSS、监察和控制互联网流量以致举办Ajax人机联作等。它提供了差非常的少前端开荒需求的全方位效果。官网:www.getfirebug.com

何以赢得Firebug?

因为它是Firefox浏览器的壹个恢宏插件,所以率先须要下载Firefox浏览器。读者能够访谈www.mozilla.com下载并安装Firefox浏览器。安装到位后用它访谈

跻身下图所示页面。点击”增加到Firefox”,然后点击”马上安装”,最终再一次起动Firefox浏览器就可以到位安装。

图片 1

深信广大从业Web开采工作的开采者都听新闻说和应用过Firebug,但恐怕超越四分之二人还不了然,其实它是三个在网页设计方面机能拾贰分刚劲的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript实行周到的追踪和调和。它是Firefox浏览器的二个插件,所以提议各位Web开荒者

Firebug是Firefox下的生龙活虎款开采类插件,现归属Firefox的五星级强力推荐插件之生龙活虎。它集HTML查看和编排、
Javascript调控台、互联网景况监视器于风流罗曼蒂克体,是付出JavaScript、CSS、HTML和Ajax的得力帮手。Firebug好似生机勃勃把精巧的Switzerland军刀,从种种分裂的角度深入分析Web页面内部的细节层面,给Web开垦者带给十分大的福利。那是黄金时代款令人喜好的插件,假如你早先从未有过接触过它,只怕在阅读本文之后,会有豆蔻梢头试的欲念。作者在作品此文的时候,正逢Firebug公布1.0正式版,那必须说是种巧合。

主面板

安装完毕现在,在Firefox浏览器之处后方就能有二个小虫子的Logo图片 2。单击该图标后就可以开展Firebug的调控台,也能够透过快速键<F12>来张开调控台。使用Ctrl+F12急迅键能够使Firebug独立展开三个窗口而不占用Firefox页面尾部的空间。

图片 3

从上海教室中得以观望,Firebug满含7个面板:

支配台面板:用于记录日志、大概浏览、错误提醒和施行命令行,同偶尔间也用于Ajax的疗养;

HTML面板:用于查看HTML成分,可以实时地编辑HTML和校正CSS样式,它回顾3个子面板,分别是样式、布局和DOM面板;

CSS面板:用于查看全体页面上的CSS文件,能够动态地改善CSS样式,由于HTML面板中早就包涵了贰个CSS面板,因而该面板将少之甚少用到;

剧本面板:用于显示Javascript文件及其所在的页面,也能够用来展现Javascript的Debug调试,包括3个子面板,分别是监督检查、货仓和断点;

DOM面板:用于显示页面上的富有指标;

网络面板:用于监视网络移动,能够扶协助调查看八个页面包车型地铁载入情形,饱含文件下载所占用的岁月和文件下载出错等消息,也得以用来监视Ajax行为;

Cookies面板:用于查看和调度cookie(需求设置下文能源中所提到的Firecookie)。


 

 

应用
Firebug插件即便功用强盛,然则它曾经和Firefox浏览器无缝地组合在合作,使用轻便直观。假若你顾虑它会侵吞太多的系统财富,也得以实惠地启用/关闭这些插件,甚至针对一定的站点开启那个插件。

  调整台面板

1.决定台面板大概浏览

此面板能够用来记录日志,也足以用于输入脚本的命令行。

2.记下日志

Firebug提供如下多少个常用的笔录日志的函数:

console.log:轻巧的记录日志;

console.debug:记录调节和测量试验消息,何况附上行号的超链接;

console.error:在新闻前显示错误Logo,并且附上行号的超链接;

console.info:在音信前体现消息Logo,並且附上行号的超链接;

console.warn:在纤弱钱呈现警报Logo,何况附行号的超链接。

在空白的html页面中,向<body>标签中进入<script>标签,代码如下:

JavaScript

<script type=”text/javascript”> console.log(‘this is log
message’); console.debug(‘this is debug message’); console.error(‘this
is error message’); console.info(‘this is info message’);
console.warn(‘this is warn message’); </script>

1
2
3
4
5
6
7
<script type="text/javascript">
  console.log(‘this is log message’);
  console.debug(‘this is debug message’);
  console.error(‘this is error message’);
  console.info(‘this is info message’);
  console.warn(‘this is warn message’);
</script>

施行代码后能够在Firebug中观望下图所示的结果,以前习于旧贯了用alert来调节和测量试验程序,然则在Firebug下能够使用console。

图片 4

3.格式化字符串输出和多变量输出

以此意义看似于C语言中的语法,能够在console记录日志的章程里使用。

%s:字符串  %d,%i:数字  %f:浮点数  %o:链接对象

再便是,那多少个函数扶持七个变量。代码如下:

JavaScript

<script type=”text/javascript”> var
kid=”孩子”,count=”3″,man=”Allen”; var
sport1=”篮球”,sport2=”羽毛球”,sport3=”网球”;
console.log(“%d个%s在玩游戏”,count,kid);
console.log(count,”个”,kid,”在玩游戏”);
console.log(“%s专长的运动有:”,man,sport1,sport2,sport3);
</script>

1
2
3
4
5
6
7
<script type="text/javascript">
  var kid="孩子",count="3",man="Allen";
  var sport1="篮球",sport2="羽毛球",sport3="网球";
  console.log("%d个%s在玩游戏",count,kid);
  console.log(count,"个",kid,"在玩游戏");
  console.log("%s擅长的运动有:",man,sport1,sport2,sport3);
</script>

运转代码后效果如下图所示:

图片 5

Firebug调节台还提供了任何职能,举个例子检验函数实践时间、新闻分组、测量检验驱动、追踪、计数乃至查看Javascript轮廓等。更加多材质可以访谈.

4.面板内的子菜单

决定台面板内有一排子菜单,分别是清除、保持、概略、全体等。

图片 6

“废除”用于破除调整高雄的内容。“保持”则是把调节高雄的内容保留,就算刷新了一直以来还设有。“全体”则是呈现全部的新闻。前边的“错误”、“警报”、“音信”、“调试音信”、“库克ies”菜单则是对具备开展了多个分拣。

“轮廓”菜单用于查看函数的性质。上面通过一个例证来演示,代码如下:

JavaScript

<button type=”button” id=”btn1″>推行循环1</button>
<button type=”button” id=”btn2″>实行循环2</button>
<button type=”button” id=”btn3″>实施循环3</button>
<script type=”text/javascript”> var f1=function(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); } function f2(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); }
document.getElementById(“btn1”).onclick=f1;
document.getElementById(“btn2”).onclick=f2;
document.getElementById(“btn3”).onclick=function(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button type="button" id="btn1">执行循环1</button>
<button type="button" id="btn2">执行循环2</button>
<button type="button" id="btn3">执行循环3</button>
<script type="text/javascript">
    var f1=function(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
    function f2(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
    document.getElementById("btn1").onclick=f1;
    document.getElementById("btn2").onclick=f2;
    document.getElementById("btn3").onclick=function(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
</script>

张开页面,展现四个按键:

图片 7

展开页面后,先启用Firebug调控台面板,然后单击“轮廓”菜单,如下图所示:

图片 8

从上图中能够看见,现身了风度翩翩行字,“概略搜集中。再度点击“概略”查看结果。”,接着,依次单击“实行循环1”、“实践循环2”、“试行循环3”四个按键各一回,同样重视复单击“概略菜单”,就可以以看见到如下图所示结果:

图片 9

能够观望Firebug显示出了十分详尽的告诉。富含各类函数的函数名、调用次数、占用时间的比例、占用时间、时间、平均时间、最小时间、最大日子以致所在的文本的行数等音讯。

5.Ajax调试

调节台面板也可用于Ajax调节和测验,在自然水准上得以代替互联网面板。比如小编张开叁个页面,能够在Firebug调节台见到此番Ajax的Http央求头消息和服务器响应头音讯。如下图,它交易会示出这一次使用的Ajax的GET方法、地址、耗费时间以至调用Ajax央求的代码行数。最根本的是有5个标签,即参数、头信息、响应、HTML、Cookies.第八个标签用于查看传递给服务器的参数;第3个标签用于查看响应头音讯和央浼头消息;第多个标签用于查看服务器重回的源委;第三个标签则是查看服务器重临的HTML结构;第七个标签用于查占星应的Cookies。

图片 10

后生可畏经看不到任何音信的面世,也许是将此作用关闭了,能够单击“调节台”旁边的下拉箭头,将“突显XMLHttpRequests”前面包车型地铁勾勾选上就能够。

图片 11

   

在安装好插件之后,先用Firefox浏览器张开必要测验的页面,然后点击右下方的暗绛红开关或接受急忙键F12唤出Firebug插件,它会将前段时间页面分成上下五个框架,如图1所示。

HTML面板

1.查看和修正HTML代码

Html面板的有力之处就是能查看和校正HTML代码,况兼那么些代码都以经过格式化的。上边以自身的三个浏览器主页来做教师。

图片 12

在页面青绿色部分代表成分自身,羊毛白表示padding部分,金黄表示margin部分。同期可以实时地抬高、校订和删除HTML节点以致品质,如下图所示。其它,单击script节点仍然是能够一贯查看脚本,此处的台本无论是内嵌在HTML中依旧外表导入的,都得以查阅到。相同那也适用于<style>标签内嵌或然导入的CSS样式和动态成立HTML代码。

图片 13

在HTML调节台的左臂能够看来整个页面当前的文档结构,能够通过单击“+”来开展。当单击相应的因素时,右左侧板中就能够来得出当下因素的样式、布局以至DOM消息。而当光标移动到HTML树中相应成分上时,上边页面中相应的要素将会被高亮显示。

例如说,将光标移动到五个<P>标签上,展现效果如下图所示:

图片 14

在HTML调整台的左边能够阅览全部页面当前的文书档案结构,能够经过单击“+”来张开。当单击相应的成分时,右边边板中就能够来得出近日成分的体裁、布局以至DOM新闻。而当光标移动到HTML树中相应成分上时,上边页面中相应的成分将会被高亮展现。

譬喻说,将光标移动到一个<P>标签上,展现效果如下图所示:

2.查看(Inspect)

接收查看(Inspect)作用,可以高速地找出到某些元素的HTML结构,如图:

图片 15

当单击”Inspect”开关后,用鼠标在网页上当选一个成分时,元素会被一个深紫的范围住,同期上面包车型大巴HTML面板中相应的HTML树也会进展並且高亮展现。再一次单击后就可以退出该形式,並且底部的HTML树也保持在此个情景。通过那个成效,能够高速搜索页面内的成分,调节和测量检验和探寻相应代码特别便利。刷新网页后,页面彰显的依旧是用Inspect选中的区域。

HTML面板下方的“编辑”按键能够用来直接编辑选中的HTML代码,而后边显示的是前段时间成分在全数DOM中的结构路线。

3.查看DOM中被剧本改善的一些

透过JavaScript来退换样式属性的值能够做到部分动漫效果。展开页面后,利用查看(Inspect)成效来选取相应的HTML代码,举个例子,选中“要闻”,如下图所示:

图片 16

单击“国内”标签后,出现下图所示效果:

图片 17

透过上海体育场合能够看出,HTML查看器会将页面上更正的源委页记录下来,并以紫罗兰色高亮表示。有了这一个效应,网页的潜规则将干净形成历史。我们能够利用该效能查看其余网址的卡通片效果是怎么着兑现的。

4.翻看和改换成分的样式

在右侧的体裁面板中,呈现了此元素当前具有的样式。全部的样式都得以实时地剥夺和改过,如下图所示,通过在”text-align:center”前单击相会世禁用的标识,那样就能够禁止使用此准则。通过一直在体制value值上单击就足以修正。

图片 18

单击“布局”面板就能够看见此因素具体的布局属性,这是三个正规的盒模型。通过“布局”面板,能够相当轻便地看来成分的偏移量、外边距、边框、内边距和要素的可观、宽度等音讯,如下图所示:

图片 19

5.查看DOM的信息

单击“DOM”面板后得以看见此因素的详细的DOM新闻以至函数和事件,如下图所示:图片 20

 

图1:Firebug插件展开图示

CSS、DOM和网络面板

那3个面板相对于前方2个面板相比较次要,CSS和DOM面板与HTML面板中侧面的面板功用相同,但比不上HTML面板灵活,由此日常采用得相当少。

CSS面板特有的贰个效应正是能够分级详细查看页面中内嵌以至动态导入的样式。如下图所示:

图片 21

单击CSS面板后就能够分级查占星应的体制。此处张开的体裁都以经过格式化的,符合于上学CSS的代码格式和专门的职业。

而在互连网面板中,相对有点精锐的功力,举例打开某些网址首页,Firebug展现效果如下图所示:

图片 22

该页面能够监视每大器晚成项元素的加载情状,包括剧本,图片等的大小以至加载用时等,对于页面优化有着特别主要的意思。

其余,顶端还是能够分类查看成分的HTML、CSS、JS等的加载景况,使解析进而灵敏。

 相信广大从业Web开荒职业的开辟者都据书上说和接收过Firebug,但或然大多数人还不明了,其实它是两个在网页设计方面效果万分苍劲的编辑器,它能够对HTML、DOM、CSS、HTTP和Javascript进行完美的追踪和调治将养。它是Firefox浏览器的一个插件,所以提出各位Web开荒者,要充足利用Fire福克斯浏览器和Firebug插件举行通常的调节和测量试验专门的工作。本文采取了13个Web开拓者应该调整的Firebug的中低端应用技能,介绍给我们。

图片 23

  脚本面板

剧本面板不只好够查看页面内的本子,并且还应该有强盛的调治作用。

在剧本面板的右侧有“监察和控制”、“仓库”和“断点”七个面板,利用Firebug提供的装置断掉的功能,能够很有益于地调节和测量试验程序,如下图所示:

图片 24

1.静态断点

诸如test.html文件,代码如下:

XHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <script
type=”text/javascript”> function doSomething(){ var lab =
document.getElementById(‘messageLabel’); arrs=[1,2,3,4,5,6,7,8,9];
for(var arr in arrs){ lab.innerHTML+=arr+”<br />” } }
</script> </head> <body> <div> <div
id=”messageLabel”></div> <input type=”button” value=”Click
Here” onClick=”doSomething();”/> </div> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript">
        function doSomething(){
            var lab = document.getElementById(‘messageLabel’);
            arrs=[1,2,3,4,5,6,7,8,9];
            for(var arr in arrs){
                lab.innerHTML+=arr+"<br />"
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="messageLabel"></div>
        <input type="button" value="Click Here" onClick="doSomething();"/>
    </div>
</body>
</html>

运行代码后得以看见下图所示效果。图中加粗并有颜色的行号表示此处为JavaScript代码,能够在那间安装断点。比如在第6行那句代码前边单击一下,那它后边就能够冒出一个赤褐的圆点,表示此处已经被安装了断点。当时,在左手断点面板的断点列表中就应时而生了刚刚设置的断点。即使想有时禁止使用某些断点,能够在断点列表中去掉有些断点的前面的复选框中的勾,那么那时候右臂面板中相应的断点就从红暗黑形成了红白榄鲜蓝了。

图片 25

安装完断点之后,大家就足以调节和测量试验程序了。单击页面中的“Click
Here”按键,能够看来剧本甘休在用谈木色底色标出的那生龙活虎行上。那个时候用鼠标移动到有个别变量上就可以展现那时以此变量的value。呈现效果如下:

图片 26

此刻JavaScript内容上方的图片 27七个开关已经变得可用了。它们各自代表“继续实行”、“单步踏向”、“单步跳过”和“单步退出”。

继续推行<F8>:当通过断点来终止实践脚本时,单击<F8>就能够苏醒实行脚本。

单步步向<F11>:允许跳到页面中的其他函数内部。

单步跳过<F10>:单击<F10>来直接跳过函数的调用即跳到return之后。

单步退出<shift+F11>:允许复苏脚本的实行,直到下一个断点甘休。

单击“单步步向”按键,代码会跳到下大器晚成行,展现效果如下:

图片 28

图片 29

从上海体育场合能够观察,当鼠标移动到“lab”变量上时,就能够来得出它的剧情是多个DOM元素,即“div#messageLabel”。

那会儿将右左边板切换来“监察和控制”面板,这里列出了多少个变量,包括“this”指针的照准以致“lab”变量。单击“+”能够看出详细的音信。呈现如下:

图片 30

2.原则断点

在“lab.innerHTML+=arr+”<br
/>””那行代码前面包车型客车序号上单击鼠标右键,就可以现身设置条件断点的输入框。在该框内输入“arr==5”,然后回车确认,突显效果如下:

图片 31

最后单击页面包车型大巴“Click
Here”开关。能够开采,脚本在“arr==5”那几个表明式为真时停下了,由此“5”以至后来的数字未有显拿到页面中。下图分别是符合规律职能和装置了标准化断点之后的来得效果比较:

图片 32图片 33

  1、使用Firebug能够找到页面中的任何内容

从图第11中学旁观,Firebug有6个入眼的Tab按键,下文将重大介绍介绍这几上边的坚决守护。
Console HTML CSS Script Dom Net
调整台 Html查看器 Css查看器 脚本条时代 Dom查看器 互连网情形监视

资源

急迅键:按<F12>能够长足开启Firebug,若是想获取完整的快速键列表,能够访问.

标题:假若设置进程中遇见了艰辛,能够查阅Firebug的Q&A,网址为.

Firebug插件:Firebug除了自己强大的效率之外,还应该有基于Firebug的插件,它们用于扩大Firebug的效果与利益。比方Google公司开垦Page
Speed插件,开荒职员能够行使它来评估他们网页的脾性,并收获有关怎么着改善质量的提议。Yahoo公司开垦的用来检查实验页面全部品质的YSlow和用于调试PHP的FirePHP。还应该有用于调节和测量检验Cookie的Firecookie等。

  不掌握诸位有无境遇过如此的场合,在四个复杂的HTML页面中,当您想找某些页面元素的实在对应的HTML时,你只可以在一大堆HTML代码中去索求,十一分麻烦。有了Firebug,以后你只需求在页面中,用鼠标右键选中有些元素,然后在弹出的菜系中,选取“查看成分”,立即就能在HTML页面代码中找到该因素对应的代码了,十二分方便,如下图所示:

Console 控制台
调整台能够显稳当前页面中的javascript错误以至警告,并提示出错的公文和行号,方便调节和测量试验,那个错误提醒比起浏览器自个儿提供的失实提醒越发详实且持有参谋价值。何况在调治Ajax应用的时候也是特意有用,你可以知道在调整台里看看每叁个XMLHttpRequests乞求post出去的参数、
UCR-VL,http头以至回馈的从头到尾的经过,原来有如在暗地里黑匣子里运转的次序被清晰地呈现在您如今。

总结

通过本文的读书,读者能够垄断(monopoly卡塔尔国Firebug的基本成效。Firebug已经渐渐变为叁个调试平台,而不止是三个简易的Firefox增加插件。学好Firebug能给今后的求学和劳作提供一定的佑助。

仿照效法文献:《锋利的JQuery(第2版)》

1 赞 3 收藏 1
评论

图片 34

 

象C shell或Python
shell同样,你仍是可以够在调整新竹查阅变量内容,直接运维javascript语句,固然是大段的javascript程序也能够准确运营并拿到运转期的音信。

图片 35

支配台还会有个首要的效果与利益正是翻开脚本的log,
在那早先您恐怕习贯了采纳alert来打字与印刷变量,可是Firebug给我们带给了一个新对象
—— console.log, 最简易的打字与印刷日志的语法是那样的:

 

console.log(”hello world”)

  相仿,也提供了更便捷的法子:只需求点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中活动时,在Firebug调整新竹就立时显得移动时经过的HTML成分的代码:

若果你有一群参数须要组合在同步输出,能够写成那样:

 

console.log(2,4,6,8,”foo”,bar).

图片 36

Firebug的日志输出有七种可选的格式以致语法,以至足以定制彩色输出,比起单调的alert,鲜明尤其平价,限于篇幅,这里不做详细表达,可是有志于升高debug成效的读者,能够到Firebug的官方站点(见附录卡塔 尔(阿拉伯语:قطر‎查看更详细的学科。

  2、能够选拔Firebug更正HTML和CSS

图2: 在支配台里调节和测量试验javascript

  通过Firebug,能够直接改进HTML,扩充HTML的属性,删除成分,扩展CSS样式及贯彻更加多职能,如下图:

图片 37

图片 38

翻开和修改HTML
率先次会见Firebug强盛的HTML代码查看器,就以为它特别,相比于Firefox自带的HTML查看器,它的作用强盛了重重。
HTML

  在上航海用体育场地的美食指南中能够掌握看出,你能够对HTML成分举行有滋有味的改换操作,方法是先点击HTML部分的代码,然后鼠标右键就可以在弹出的菜系中进行操作。

先是你看看的是已经通过格式化的HTML代码,它有明晰的层系,你可以看到有助于地辨别出每四个标签之间的直属并行关系,标签的折叠成效用够帮忙你三月不知肉味解析代码。源代码上方还标识出了DOM的层系,如图3所示,它了然地列出了叁个hml成分的parent、child以致root成分,同盟Firebug自带的CSS查看器使用,会给div+css页面剖析编写带来相当的大的功利。你还足以在HTML查看器中一直退换HTML源代码,并在浏览器中第一时间见到矫正后的功用,光凭那点就能够让无数页面设计员至死不变地成为Firebug的客官了。

  3、能够经过Firebug查看DOM成分和对XML进行操作

不常候页面中的javascript会依靠客商的动作如鼠标的onmouseover来动态改动一些HTML成分的样式表或背景象,HTML查看器会将页面上改造的剧情也抓下来,并以威尼斯绿色高棉亮标识,让网页的潜规则通透到底成为历史。

  当展开叁个HTML页通过Firebug查看HTML代码时,你能够相同的时候点在调节面板中的DOM树,就能够以DOM的树型结构形式看看任何HTML的布局。而只要你是开拓了贰个XML文件,那么鼠标右键点XML文件中的任何二个要素,在弹出的菜单中相仿能够选择对XML进行相关操作,如下图:

应用Inspect检查职能,大家还足以用鼠标在页面中央行政单位接接收部分区块,查占星应的HTML源代码和CSS样式表,真正的成功所见即所得,假若你使用了外界编辑器更正了日前网页,能够点击Firebug的reload图片重新载入网页,它会三回九转追踪你后边用Inspect选中的区块,方便调节和测量检验。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

CopyRight © 2015-2019 金沙中心城 All Rights Reserved.
网站地图xml地图