js 浏览器上调试方法多样
1、alert(111) 直接打印出 111
2、debugger 写在代码要调试的地方
3、直接在控制台 source 里找到要调试的代码打断点
4、console 常用的打印方式
console.log(23333)
console.warn(23333)
console.info(23333)
console.debug(23333)
console.error(23333)
执行结果
console 打印还支持五种占位符
字符（%s）、整数（%d或%i）、浮点数（%f）、对象（%o） 和样式定义（%c）
var json = {
name:'cindy'
}
console.log('公元 %s 年', '23333')
console.log('公元 %d 年', 23333)
console.log('浮点数 %f ', 23.99)
console.log('object对象 %o', json)
console.log("%c Hello World","font-size:20px;color:green");
console.log("%cthis is%cmy sister","color:green","font-weight:bold;color:red;font-size:20px;");
执行结果
console.dir(element) 将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等
console.dirxml(element) 输出 DOM 节点代码
<body>
<div class="box">
<p>let's show time</p>
<span>what you mean?</span>
<ul>
<li>apple</li>
</ul>
</div>
<script type="text/javascript">
var elem = document.querySelector('.box')
console.dirxml(elem)
console.dir(elem)
</script>
</body>
执行结果
console.group 和 console.groupEnd 输出归类
console.group('begin')
console.log('内部包含项目')
console.info(23333)
console.groupEnd('end')
console.log('others')
console.assert 对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。
console.count() 统计执行次数
for (var i = 6; i >= 0; i--) {
console.count('执行次数显示: ')
}
console.time() 和 console.timeEnd() 计时
console.time('timer')
for (var i = 50000; i >= 0; i--) {
}
console.timeEnd('timer')
console.profile 和 console.profileEnd 查看 cpu 相关信息
console.timeLine 和 console.timeLineEnd 记录一段时间轴
console.profile('cpu')
for (var i = 50000; i >= 0; i--) {
}
console.profileEnd('cpu')
5、谷歌调试
document.body.contentEditable=true 控制台执行 即可直接编辑页面元素
clear() 控制台清理内存
发现别人比我整理的更好
http://www.cnblogs.com/liyunhua/p/4529079.html#_label17
js 浏览器上调试方法多样的更多相关文章
- 利用ChromeCROSS可以在chrome浏览器上调试跨域代码
利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...
- 2019-11-29-WPF-依赖属性绑定不上调试方法
原文:2019-11-29-WPF-依赖属性绑定不上调试方法 title author date CreateTime categories WPF 依赖属性绑定不上调试方法 lindexi 2019 ...
- 2019-8-2-WPF-依赖属性绑定不上调试方法
title author date CreateTime categories WPF 依赖属性绑定不上调试方法 lindexi 2019-08-02 19:56:32 +0800 2019-8-2 ...
- JS浏览器类型推断方法
在网站的前端开发,浏览器兼容性问题这已经让我们抢,Chrome但也生出不知道多少麻烦,我们增加. 浏览器兼容性将由前端开发框架解决的第一个问题.要解决的兼容性问题必须首先准确推断浏览器的类型和它的版本 ...
- 通过js引用外部脚本（嘿嘿，方便直接在浏览器上调试抓取代码）
最近折腾爬虫,后端使用jQuery进行数据采集,一般都是先从浏览器中将采集代码调试好后直接放到后端跑了. 有些网址没有引用jQuery,那调试起来就不方便了,可以用以下代码动态添加script标签,将 ...
- 引进js文件运行在浏览器上调试报文件找不到
原因是jsp文件的路径和js文件不在同一目录下,用"../"将它们的路径配置在同一路径下或者在路径前面加上"<%= request.getContextPath() ...
- Charles学习（二）之使用Map local代理本地静态资源以及配置网页代理在Mac浏览器上调试移动端
前言 我们在开发的过程肯定是一边写代码,一边查看自己的代码写的是否存在问题,那么问题来了,有两种情况 情况一:我们可以本地起服务,那么我们就可以在本地检查自己的代码,查看运行结果 情况二:本地无法起服 ...
- js程序的调试方法
- PHP在浏览器上跟踪调试的方法以及使用ChromePhp、FirePHP的简单介绍
之前用ThinkPHP时发现有个 trace 函数可以跟踪调试,感觉很有意思,网上搜索了下类似的东西,发现了 ChromePhp ,以前没想过这样来调试 PHP 程序,感觉非常方便,很有用. Thin ...
随机推荐
- Java基础学习 —— io
/** 解决数据与数据之间的传输问题. 字节流: 输入字节流: -------| InputStream 所有输入字节流的基类.抽象类. -----------| FileInputStream 读取 ...
- poj 2553 强连通
题意:给出一个有向图,定义:若节点v所有能到达的点{wi},都能反过来到达v,那么称节点v是sink.题目要求所有的sink点. 思路:强连通缩点找出出度为零的点,输出即可. 这题主要问题是读题,了解 ...
- ★电车难题的n个坑爹变种
哲学家都不会做的电车难题变异 此题会答清华北大 "电车难题(Trolley Problem)"是伦理学领域最为知名的思想实验之一,其内容大致是: 一个疯子把五个无辜的人绑在电车轨道 ...
- 团队作业8——第二次项目冲刺（Beta阶段）--5.21 second day
团队作业8--第二次项目冲刺(Beta阶段)--5.21 second day Day two: 会议照片 项目进展 今天是beta冲刺的第二天,组长还在准备考试当中,我们继续做前端改进和后端安排,今 ...
- 201521123097 《JAVA程序设计》第七周学习总结
1. 本周学习总结 总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码: public boolean contains(Object ...
- 201521123070 《JAVA程序设计》第6周学习总结
1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123113 《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. -继承设计的技巧 1.将公共操作和属性放在父类 2.不要使用protected修 ...
- 201521123011《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. MySql数据库简单操作 1.启动与退出(quit或exit ) 操作 显示所有数据库: show databa ...
- 内置open（）函数对外部文件的操作
>>> file=open('c://333.csv','r') 一些基本打开关闭操作 >>> s=file.read() >>> print s ...
- JSP第五篇【JSTL的介绍、core标签库、fn方法库、fmt标签库】
什么是JSTL JSTL全称为 JSP Standard Tag Library 即JSP标准标签库. JSTL作为最基本的标签库,提供了一系列的JSP标签,实现了基本的功能:集合的遍历.数据的输出. ...