firebug调节和测试js代码

JS代码的调节和测试:<br>
本子:可查阅JS代码,对其安装断点,刷新(点击左侧行号即可)<br>
情势:单步进入、单步退出、单步跳过、继续<br>
推行到断点处,切换来监察和控制栏,可改变断点中相应的变量<br>
函数怎样被调用:在代码处写入 console.trace();<br>//console.trace
轮廓栏:可进展简单的属性分析

Firebug是网页浏览器火狐下的壹款开发类插件,它集HTML查看和编写制定、JavaScript控制台、网络状态监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力帮手。F1二开辟firebug。

Firebug作用卓殊强硬,不仅能够调节DOM,CSS,还足以调节JS代码,下边介绍一下调剂JS。

console.log(“%d年%d月%日”,2015,3,30);
console.group(“第一组”);
console.log(“101”);
console.group(“第二组”);
console.log(“101”);

HTML

1、认识console对象

  console对象是Firebug内置的目的,该对象能够在代码中写入,能够在控制面板中写入。

1)有八个章程来显示音信。依次为:

  1、console.log(),能够用来取代alert()或document.write()

  二、console.info(),一般新闻

  三、console.debug(),除错新闻

  四、console.warn(),警告提醒

  伍、console.error(),错误提示

二)常常用的多少个办法:

  一、console.group()和console.groupEnd(),用于分组呈现新闻,如:

     console.group(“第二组消息”);

       console.log(“第3组第二条”);

       console.log(“第一组第叁条”);

       console.groupEnd();

       console.group(“第一组消息”);

       console.log(“第三组第3条”);

       console.log(“第二组第叁条”);

       console.groupEnd();

  二、console.dir()能够展现三个对象拥有的特性和艺术。

    
 三、console.dirxml()用来突显网页的有些节点(node)所蕴藏的html/xml代码。比如,先获得贰个表格节点,

         var table = document.getElementById(“table1”);

       然后,展现该节点包括的代码。

             console.dirxml(table);

  
4、console.assert()用来判定三个表明式或变量是不是为真。尽管结果为否,则在支配台出口一条相应新闻,并且抛出三个百般。

   伍、console.trace()用来追踪函数的调用轨迹。
假设想清楚这一个函数是怎么被调用的,只需在该函数体中进入console.trace()方法就能够了。

   陆、console.time()和console.timeEnd(),用来显示代码的周转时刻。如: 

      console.time(“计时器一”);

        for(var i=0;i<1000;i++){

        for(var j=0;j<1000;j++){}

        }

        console.timeEnd(“计时器一”);

  7、console.profile()和console.profileEnd(),分析程序种种部分的运营时刻,找出瓶颈所在。

console.time(“test”);
运行
console.timeEnd(“test”);
会输出运维时刻

1.火速稳定网页元素:ctrl+shift+c 或 “小甲虫”旁边的显示屏箭头
2.迅速键设置:“小甲虫”下拉选项中的“自定义火速键”
叁.在HTML上上有若干节点,点击即可定位到相应节点

二、认识控制面板

  如图所示为firebug的控制面板,左侧为消息体现区域,右边为js代码调节和测试区域,代码编辑完之后,能够点击运转,即可在坐左侧突显出来。

图片 1

一、查看JS代码,设置断点(点击左边行号即可)
二、调试js功效代码
F8:继续
F10:单步跳过
F1壹:单步进入
Shift+F11:单步退出
三、console.trace()可以领略函数怎么样被调用
点击轮廓
等待页面执行实现
再一次点击轮廓,就会……
展现函数被调用时的有个别参数信息

能够修改HTML和CSS内容。立刻完成。

3、js代码断点调节和测试

  先来认识控制面板,右边为代码区域,左边为监测区域,能够在行号前边单击添加断点,再单击撤销断点,F八为继承调节和测试,F拾为单步跳过,F1壹为单步进入,shift+F1一为单步跳出。

图片 2

CSS

翻开、修改CSS、禁止使用CSS、添加CSS(在空白处双击即可)

供给微调样式比如字体大小等,点击一下然后上下键调整。

点击左边链接,直接能够进来CSS编辑页。

能够查阅布局。

评估页面下载速度

互联网功能: 一、分类别的查看下载文件和http请求
二、能够查看http请示的详细新闻,是不是中标、是或不是缓存、请求参数、响应的结果等

Ajax监听

网络下的XHQX56:输入字符就会有请求参数,包罗关键字参数,再次来到结果是下列的html代码。
当页面向服务器发送get或post请求是,它会监听那几个请求,并在firebug下罗列起来。其中参数正是大家恳请的字符或然名字(键值对)。响应是从服务器中复苏的新闻。

JavaScript控制台

尽管您在js页面中写入console.log()控制台会输出音讯。并且在左边能够平素写入运营jS。

console.info()/debug()/warn()/error() //消息/调节和测试/警告/错误
console.group()、console.groupEnd() //输出新闻分组 console.dir()
//展现全体指标的属性和办法 console.time()/console.timeEnd()
//时间跟踪,记录代码运营时间 console.time(); console.timeEnd();<br>
console.group()<br> %d – 数字,%f – 浮点数,%s – 字符串,%o – 对象
console.info()/debug()/warn()/error()
//消息/调节和测试/警告/错误<br> console.group()、console.groupEnd()
//输出音信分组<br> console.dir()
//显示全体目的的质量和办法<br>
console.time()/console.timeEnd() //时间跟踪,记录代码运营时间

JavaScript代码调节和测试

1、查看JS代码,设置断点(点击左边行号即可) 贰、调节和测试js功效代码 F8:继续
F10:单步跳过 F1一:单步进入 Shift+F11:单步退出
三、console.trace()能够领略函数如何被调用

点击概略 等待页面执行完结再度点击轮廓,就会突显函数被调用时的有个别参数消息

叩问七个工具,点击全部可以点击的地点,右键全体能够右键的地点,点击下拉菜单。

类似的阳台有火狐谷歌(Google)的开发者平台,取其所长。