威尼斯人线上娱乐

JavaScript在浏览器上的调整技能,在调整台打字与印刷调式新闻测试Js的完成

26 4月 , 2019  

JavaScript在浏览器上的调节和测试技艺

2016/11/04 · JavaScript
· 8 评论 ·
调试

正文笔者: 伯乐在线 –
TGCode
。未经小编许可,禁止转发!
接待参预伯乐在线 专辑小编。

在网址开拓中,我们难免会碰到各类bug,那时,大家就需求去调解大家的JavaScript脚本找寻难题,然后去修改代码。那大家如何去调整呢?

最简单易行的就是alert()形式,不过,alert 弹出窗口会中断程序,
而且要是要在循环中展现消息,就会弹出四个弹窗,你不点击alert框的规定开关下二个alert就不会冒出,其余alert
显示对象长久突显为[object ],所以alert()方法只适合小程序。

第二种是断点调节和测试

1.在源码上接纳debugger

例如:

JavaScript

function check(){ var i=0; debugger; alert(1); } check();

1
2
3
4
5
6
function check(){
var i=0;
debugger;
alert(1);
}
check();

威尼斯人线上娱乐 1

能够见到,程序会运作到debugger处就会停住,并从未实行前边,你能够按F八来继续实践。

二.
直接在浏览器上断点,同样是开发调控台的source,找到您要调整的代码,然后点击你要断点的那1行代码的左侧行码处,如下图:

威尼斯人线上娱乐 2

其三种就是自己最欢愉的console

最常用的就是console.log(),在调节长沙打字与印刷音信,它能够承受任何字符串、数字和JavaScript对象,也能够承受换行符n以及制表符t。

JavaScript

var i=0; var name=”我是console”; var json={ “key”:”console” };
console.log(i); console.log(name); console.log(json);

1
2
3
4
5
6
7
8
var i=0;
var name="我是console";
var json={
"key":"console"
};
console.log(i);
console.log(name);
console.log(json);

威尼斯人线上娱乐 3

你能够按红箭头所指的按键清除调节台,也能够一贯用console.clear()清除。

自然console可不止那贰个办法,它还有:

console.info 用于出口提示性新闻

console.error用于出口错误新闻

console.warn用于出口警示音讯

console.debug用于出口调节和测试音讯

console.info(“提示”); console.error(“报错了”); console.warn(“警告”);
console.debug(“调节和测试音讯”);

威尼斯人线上娱乐 4

console对象的方面三种情势,都得以选拔printf风格的占位符。但是,占位符的档案的次序相比少,只援助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)多样。

JavaScript

console.log(“%s年”,2016); console.log(“%d年%d月”,2016,6);
console.log(“%f”,3.1415); console.log(“%o”,json);

1
2
3
4
console.log("%s年",2016);
console.log("%d年%d月",2016,6);
console.log("%f",3.1415);
console.log("%o",json);

威尼斯人线上娱乐 5

假设您认为上面的输出消息太枯燥了,我们还足以如此:

JavaScript

console.log(“%c自定义样式”,”font-size:20px;color:green”);
console.log(“%c笔者是%c自定义样式”,”font-size:20px;color:green”,”font-weight:bold;color:red”);

1
2
console.log("%c自定义样式","font-size:20px;color:green");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

威尼斯人线上娱乐 6

console.dirxml用来展现网页的有个别节点(node)所包括的html/xml代码

<table> <thead> <tr> <th></th>
<th></th> <th></th> <th></th>
<th></th> </tr> </thead> </table>
<script> var table=document.querySelector(“table”);
console.dirxml(table); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
<script>
var table=document.querySelector("table");
console.dirxml(table);
</script>

威尼斯人线上娱乐 7

JavaScript在浏览器上的调整技能,在调整台打字与印刷调式新闻测试Js的完成。console.group输出1组信息的伊始

console.groupEnd甘休壹组输出新闻

JavaScript

console.group(“start”); console.log(“子项”); console.groupEnd(“end”);
console.log(“aa”);

1
2
3
4
console.group("start");
console.log("子项");
console.groupEnd("end");
console.log("aa");

威尼斯人线上娱乐 8

console.assert对输入的表明式举办预感,唯有表达式为false时,才输出相应的音信到调控台

JavaScript

var isTrue=true; console.assert(isTrue,”我是不当”); isTrue=false;
console.assert(isTrue,”作者是不对2″);

1
2
3
4
var isTrue=true;
console.assert(isTrue,"我是错误");
isTrue=false;
console.assert(isTrue,"我是错误2");

威尼斯人线上娱乐 9

console.count  当您想计算代码被施行的次数,这么些方法很有用

JavaScript

function play(){ console.count(“实行次数:”); } play(); play(); play();

1
2
3
4
5
6
function play(){
     console.count("执行次数:");
}
play();
play();
play();

威尼斯人线上娱乐 10

console.dir
 直接将该DOM结点以DOM树的构造实行输出,能够详细核查象的章程提升级等

<table> <thead> <tr> <th></th>
<th></th> <th></th> <th></th>
<th></th> </tr> </thead> </table> var
table=document.querySelector(“table”); console.dir(table);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
 
var table=document.querySelector("table");
console.dir(table);

console.time 计时开首

console.timeEnd 计时甘休

JavaScript

console.time(“array”); var a=0; for(var i=0;i<100000;i++){ a += i; }
console.timeEnd(“array”);

1
2
3
4
5
6
console.time("array");
var a=0;
for(var i=0;i<100000;i++){
a += i;
}
console.timeEnd("array");

威尼斯人线上娱乐 11

console.profile和console.profileEnd同盟共同利用来查看CPU使用有关消息

console.timeLine和console.timeLineEnd协作共同记录1段时间轴

打赏协助自个儿写出更加多好作品,多谢!

打赏笔者

在网址开垦中,我们难免会遭遇各个bug,那时,大家就必要去调解大家的JavaScript脚本寻找题目,然后去修改代码。那我们怎么去调度呢?

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

原稿出处:
ctriphire   

大家都有用过各类别型的浏览器,每个浏览器都有和睦的特点,本身拙见,在笔者用过的浏览器当中,作者是最喜爱Chrome的,因为它对于调试脚本及前端设计调节和测试都有它比别的浏览器有过之而无不比的地点。只怕我们对console.log会有自然的问询,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么壹长串的字符串来代替alert输出新闻呢,上面作者就介绍部分调养的入门技巧,让您爱上console.log

先的简约介绍一下chrome的调整台,展开chrome浏览器,按f1二就能够轻巧的开采调整台

威尼斯人线上娱乐 12

世家能够见见调控台里面有一首诗还有其余新闻,如若想清中央空调整台,能够点击左上角这几个威尼斯人线上娱乐 13来清空,当然也得以由此在决定台输入console.clear()来促成清中央空调节台音讯。如下图所示

威尼斯人线上娱乐 14

近期假如一个情景,假诺3个数组里面有很多的成分,可是你想知道各类成分具体的值,那时候想想要是你用alert那将是多惨的壹件业务,因为alert阻断线程运转,你不点击alert框的规定开关下三个alert就不会油然则生。

上边我们用console.log来替换,感受一下它的魔力。

威尼斯人线上娱乐 15

看了地点那张图,是还是不是认知到log的强有力之处了,下边大家来探望console里面具体提供了怎么着措施能够供大家平日调节和测试时选择。

威尼斯人线上娱乐 16

当前调整台方法和品质有:

JavaScript

["$$", "$x", "dir", "dirxml",
"keys", "values", "profile",
"profileEnd", "monitorEvents",
"unmonitorEvents", "inspect", "copy",
"clear", "getEventListeners", "undebug",
"monitor", "unmonitor", "table",
"$0", "$1", "$2", "$3",
"$4", "$_"]

1
[&quot;$$&quot;, &quot;$x&quot;, &quot;dir&quot;, &quot;dirxml&quot;, &quot;keys&quot;, &quot;values&quot;, &quot;profile&quot;, &quot;profileEnd&quot;, &quot;monitorEvents&quot;, &quot;unmonitorEvents&quot;, &quot;inspect&quot;, &quot;copy&quot;, &quot;clear&quot;, &quot;getEventListeners&quot;, &quot;undebug&quot;, &quot;monitor&quot;, &quot;unmonitor&quot;, &quot;table&quot;, &quot;$0&quot;, &quot;$1&quot;, &quot;$2&quot;, &quot;$3&quot;, &quot;$4&quot;, &quot;$_&quot;]

上边我们来每家每户介绍一下千家万户艺术首要的用处。

相似情形下大家用来输入消息的章程首假如用到如下八个

1、console.log 用于出口普通消息

2、console.info 威尼斯人线上娱乐 ,用以出口提醒性音信

3、console.error用来出口错误音讯

4、console.warn用于出口警示消息

5、console.debug用以出口调节和测试音信

用图来讲话

威尼斯人线上娱乐 17

console对象的方面5种情势,都得以使用printf风格的占位符。但是,占位符的等级次序相比少,只帮助字符(%s)、整数(%d或%i)、浮点数(%f)和目标(%o)八种

JavaScript

console.log(“%d年%d月%d日”,2011,三,26);
console.log(“圆周率是%f”,3.1415玖二六);

1
2
console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

威尼斯人线上娱乐 18

%o占位符,能够用来查看2个目的内部情形

JavaScript

var dog = {}; dog.name = “大毛”; dog.color = “黄色”; console.log(“%o”,
dog);

1
2
3
4
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

威尼斯人线上娱乐 19

6、console.dirxml用来展现网页的某部节点(node)所涵盖的html/xml代码**

JavaScript

<body> <table id=”mytable”> <tr>
<td>A</td> <td>A</td> <td>A</td>
</tr> <tr> <td>bbb</td> <td>aaa</td>
<td>ccc</td> </tr> <tr> <td>111</td>
<td>333</td> <td>222</td> </tr>
</table> </body> <script type=”text/javascript”>
window.onload = function () { var mytable =
document.getElementById(‘mytable’); console.dirxml(mytable); }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById(‘mytable’);
        console.dirxml(mytable);
    }
</script>

威尼斯人线上娱乐 20

7、console.group出口1组音信的起首

8、console.groupEnd利落一组输出新闻

看您供给选用不一致的输出方法来行使,借使上述三个艺术再协作group和groupEnd方法来三头行使就可以输入五花八门的不等款型的出口音信。

威尼斯人线上娱乐 21

哈哈,是或不是认为很美妙啊!

9、console.assert对输入的表明式举行预知,唯有表明式为false时,才输出相应的音信到调节台

威尼斯人线上娱乐 22

10、console.count(这些方法丰盛实用哦)当您想总计代码被实施的次数

威尼斯人线上娱乐 23

11、console.dir(这一个措施是自己时常利用的 可不知道比for
in方便了有点) 直接将该DOM结点以DOM树的布局进行输出,能够详细查对象的点子升高档等

威尼斯人线上娱乐 24

12、console.time 计时初阶

13、console.timeEnd  计时结束(看了上面包车型大巴图你弹指间就感受到它的厉害了)

威尼斯人线上娱乐 25

14、console.profileconsole.profileEnd协作协同利用来查看CPU使用有关新闻

威尼斯人线上娱乐 26

在Profiles面板里面查看就可以知到cpu相关应用消息

威尼斯人线上娱乐 27

15、console.timeLineconsole.timeLineEnd协作协同记录1段时间轴

16、console.trace  仓库追踪相关的调弄整理

上述方法只是自己个人驾驭罢了。倘使想查看具体API,能够上合法看看,具体地址为:

 

下边介绍一下调节台的有个别飞速键

一、方向键盘的上下键,大家一用就驾驭。举个例子用上键就一定于采纳上次在调整台的输入符号

2、$_一声令下归来目前一次表达式实践的结果,作用跟按提升的方向键再回车是1律的

威尼斯人线上娱乐 28

上面的$_亟需掌握其奥义技巧选取合适,而$0~$4则意味了近年四个你挑选过的DOM节点。

如何意思?在页面右击选用审查元素,然后在弹出来的DOM结点树上边随意点选,那个被点过的节点会被记录下来,而$0会回来方今一遍点选的DOM结点,由此及彼,$一重回的是最棒次点选的DOM节点,最多保留了5个,要是不够伍个,则赶回undefined

威尼斯人线上娱乐 29

3、Chrome
调节埃德蒙顿原生支持类jQuery的选拔器
,也正是说你能够用$丰硕纯熟的css接纳器来摘取DOM节点

威尼斯人线上娱乐 30

4、copy透过此命令能够将要调整台获取到的始末复制到剪贴板

威尼斯人线上娱乐 31

(哈哈 刚刚从调控台复制的body里面的html能够率性粘贴到哪 比方记事本
 是还是不是认为功效很强劲)

5、keys和values 前者重返传入对象具有属性名组成的数目,后者再次回到全部属性值组成的数组

威尼斯人线上娱乐 32

谈起那,不免想起console.table方法了

威尼斯人线上娱乐 33

 

 

2次偶然的机遇,展开百度的时候按下了F12,然后就见调节台里面输出了百度的招聘广告,感到挺帅气的,再然后就有了这篇博文。

打赏支持本身写出越多好小说,多谢!

任选壹种支付格局

威尼斯人线上娱乐 34
威尼斯人线上娱乐 35

2 赞 9 收藏 8
评论

最简便易行的正是alert()方法,可是,alert 弹出窗口会中断程序,
而且如若要在循环中显示音讯,就会弹出多个弹窗,你不点击alert框的鲜明开关下2个alert就不会晤世,其它alert
显示对象永世显示为[object ],所以alert()方法只适合小程序。

6、monitor & unmonitor

monitor(function),它接受三个函数名作为参数,举个例子function a,每次a被实行了,都会在支配台出口一条消息,里面含有了函数的称呼a及举办时所传颂的参数。

而unmonitor(function)就是用来终止这一监听。

威尼斯人线上娱乐 36

看了这张图,应该掌握了,约等于说在monitor和unmonitor中间的代码,实践的时候会在决定台出口一条消息,里面富含了函数的名号a及进行时所传颂的参数。当免除监视(也正是实践unmonitor时)就不再在调节台出口消息了。

JavaScript

$ // 轻易明了正是 document.querySelector 而已。 $$ // 简单通晓就是document.querySelectorAll 而已。 $_ // 是上三个表明式的值 $0-$4 //
是新近伍个Elements面板选中的DOM成分,待会会讲。 dir // 其实便是console.dir keys // 取对象的键名, 再次来到键名组成的数组 values //
去对象的值, 再次回到值组成的数组

1
2
3
4
5
6
7
$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

 

上面看一下console.log的部分技能

一、重写console.log 改换输出文字的样式

威尼斯人线上娱乐 37

2、利用调节台出口图片

威尼斯人线上娱乐 38

叁、钦赐输出文字的体裁

威尼斯人线上娱乐 39

谈到底说一下chrome调控台贰个粗略的操作,怎么着查看页面成分,看下图就知道了

威尼斯人线上娱乐 40

你在决定台轻巧操作1次就知晓了,是否认为一点也不细略!

赞 6 收藏
评论

威尼斯人线上娱乐 41

既是能够这么在决定台出口信息,那今后再调节和测试Js的时候不就足以节省大多费劲了呗!制止不误人子弟,特意使用for(var
i in console)查看了下种种浏览器调整台对console的帮忙,

关于作者:TGCode

威尼斯人线上娱乐 42

路途虽远,无所畏
个人主页 ·
小编的文章 ·
9 ·
   

威尼斯人线上娱乐 43

第3种是断点调节和测试

结果如下:

在源码上应用debugger

IE 11 控制台

例如:

log , info , warn , error , debug , assert , time , timeEnd , group ,
groupCollapsed , groupEnd , trace , clear , dir , dirxml , count ,
countReset , cd , select , profile , profileEnd

function check(){

Firebug 控制台

var i=0;

log , debug , info , warn , exception , assert , dir , dirxml , trace ,
group , groupCollapsed , groupEnd , profile , profileEnd , count , clear
, time , timeEnd , timeStamp , table , error

debugger;

Chrome 控制台

alert(1);

memory , _commandLineAPI , debug , error , info , log , warn , dir ,
dirxml , table , trace , assert , count , markTimeline , profile ,
profileEnd , time , timeEnd , timeStamp , timeline , timelineEnd , group
, groupCollapsed , groupEnd , clear

}

能够见到,以上作者测试的浏览器对 log , info , warn , error , debug
多少个着力方法都是永葆的,注意,作者使用的是 IE 1一,别的版本笔者没测试,而
Firefox 自身也是不带调控台的,必要加载Firebug
插件并且运行它,才干console,不然正是Js报错了。为了采取起来更方便,能够和谐包装一下,推断一下浏览器对
console 的接济,不支持就只能动用原来的 alert 也许别的方式了。

check();

简轻易单用法:

能够见到,程序会运作到debugger处就会停住,并从未奉行前面,你能够按F八来继续实施。

console.log(“日志音讯”);
console.info(“一般消息”);
console.debug(“调节和测试音讯”);
console.warn(“警告提醒”);
console.error(“错误提示”);

二.
直接在浏览器上断点,一样是开采调节台的source,找到您要调度的代码,然后点击你要断点的那一行代码的左边行码处

格式化输出:

其两种就是本身最欢悦的console。

console.log(“%d年%d月%d日”, 201四, 5, 20);//日期格式输出
console.log(‘%c有颜色的出口音信’, ‘color:white;
background-color:#0055CC’);//格式输出

最常用的正是console.log(),在调控罗利打字与印刷消息,它能够承受任何字符串、数字和JavaScript对象,也足以接受换行符n以及制表符t。

出口变量:

var i=0;

var who= ‘you’;
console.log(‘输出变量 We support  ‘, you);//读取变量

var name=”我是console”;

出口数组:

var json={

var arr = [1, 2, 3, 4, 5];
console.log(‘数组:’, arr);//输出数组

“key”:”console”

如上那篇利用Js的console对象,在调整台打字与印刷调式新闻测试Js的贯彻正是笔者分享给我们的全体内容了,希望能给咱们3个参照,也盼望我们多多协助脚本之家。

};

你可能感兴趣的小说:

  • js调节和测试体系调节台命令行API使用办法
  • js调控台出口的办法(详解)
  • AngularJS
    怎么样在支配台实行不当调节和测试
  • 浅谈Sublime Text
    3运行JavaScript控制台
  • js调节和测试连串 初识调控台
  • 剥夺JavaScript调节台调试的格局
  • 运用浏览器的Javascript调整台调试PHP程序
  • 哪些使Chrome调节台帮衬多行js格局——意外发掘
  • 简述JS调整台的利用

console.log(i);

console.log(name);

console.log(json);

您能够按红箭头所指的按键清除调节台,也足以直接用console.clear()清除。

本来console可不止那一个方法,它还有:

console.info 用于出口提醒性音讯

console.error用于出口错误音讯

console.warn用于出口警示音信

console.debug用于出口调试音信

console.info(“提醒”); console.error(“报错了”); console.warn(“警告”);
console.debug(“调节和测试消息”);

console对象的方面5种办法,都得以行使printf风格的占位符。但是,占位符的品类比较少,只扶助字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)各样。

console.log(“%s年”,2016);

console.log(“%d年%d月”,2016,6);

console.log(“%f”,3.1415);

console.log(“%o”,json);

假定你感觉上面的出口音信太干燥了,大家还是能这么:

console.log(“%c自定义样式”,”font-size:20px;color:green”);

console.log(“%c我是%c自定义样式”,”font-size:20px;color:green”,”font-weight:bold;color:red”);

console.dirxml用来展示网页的某部节点(node)所包罗的html/xml代码

var table=document.querySelector(“table”);

console.dirxml(table);

console.group输出1组音信的开端

console.groupEnd甘休壹组输出音讯

console.group(“start”);

console.log(“子项”);

console.groupEnd(“end”);

console.log(“aa”);

console.assert对输入的表明式进行预感,只有说明式为false时,才输出相应的新闻到调整台

var isTrue=true;

console.assert(isTrue,”作者是荒唐”);

isTrue=false;

console.assert(isTrue,”作者是大错特错2″);

console.count  当您想总结代码被实行的次数,那个方法很有用

function play(){

    console.count(“实践次数:”);

}

play();

play();

play();

console.dir
 直接将该DOM结点以DOM树的布局进行输出,能够详细核对象的艺术进步档等

var table=document.querySelector(“table”);

console.dir(table);

console.time 计时伊始

console.timeEnd 计时停止

console.time(“array”);

var a=0;

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

a += i;

}

console.timeEnd(“array”);

console.profile和console.profileEnd同盟协同行使来查看CPU使用相关信息

console.timeLine和console.timeLineEnd协作协同记录1段时间轴


相关文章

发表评论

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

网站地图xml地图