从网上看了不少Chrome调试工具的使用说明,介绍的详细的有,但是思路有点混乱不太清晰,趁着清闲的时间,对Chrome F12调用出来的工具,使用做一下具体的说明和规范。
1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态,方便用户定位标签尺寸和代码位置
2.设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择。
3.Elements 功能标签页:使用和查看,也可以修改页面上的标签元素,
如图1,可以修改的是标签中css样式,2中可以修改的是盒模型的相对位置信息。1中的样式,
被横线划掉的是优先级比较低,被覆盖或者被屏蔽的样式。
头部显示的element.style 样式,是自动生成或者js代码动态生成的
文件保存的css样式,在标签名的右边会显示,样式的所在路径和名称
样式是实时修改变动的,不需要在项目代码中,一点一点的调节。
盒模型,可以实时调节标签或者说元素的相对距离,margin为外边距,padding为内边距,border是指元素的边框的尺寸和样式调节,最中间的是元素的实际大小
4.Console控制台:用于打印和输出相关的命令信息,其实console控制台除了我们熟知的报错,还有很强大的功能:这里重点介绍一下
(下面图中,我想大家也看到了,逗比的百度招聘,之前也看到过类似的淘宝招聘,都显示在Console页面)
在console中输入console.dir(console)点击回车,红框中所显示的是console中所有的方法,可以供你使用
console.log 用于输出普通信息(前端开发,使用比较多的方法)
console.info用于输出提示性信息
console.error用于输出错误信息
console.warn用于输出警示信息
console.groupEnd结束一组输出信息
console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台。如下图,输入代码var x=false; console.assert(x,"你好");这里只是为了调试,一般情况代码是写在项目的前端代码中,用来调试可能出现的情况
console.count(这个方法非常实用哦)当你想统计代码被执行的次数,代码放在function中,统计方法执行次数
console.dir(这个方法是我们刚刚使用过的。 他的使用比for in方便了很多) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等,如图,app4是vue.js的写法。obj只是一般
JavaScript的写法使用dir,obj的比较清晰点,app4,因为是vue生成,所以比较复杂。
console.time计时开始。console.timeEnd 计时结束(看了下面的图你瞬间就感受到它的厉害了)中间插入运行代码,可以用来记录代码段运行实时时间。
keys和values 前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。
console.table方法,把数据json输入放入,能模拟出表格显示数据信息
Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节。这里如果你写爬虫的话,可以使用这个功能快速定位要爬取的数据,写出正则表达式
console.profile和console.profileEnd配合一起使用来查看CPU使用相关信。要查看的代码段翻入其中,可以查看代码段运行时,cpu的使用情况
留言与评论(共有 0 条评论) |