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 浏览器上调试方法多样的更多相关文章

  1. 利用ChromeCROSS可以在chrome浏览器上调试跨域代码

    利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...

  2. 2019-11-29-WPF-依赖属性绑定不上调试方法

    原文:2019-11-29-WPF-依赖属性绑定不上调试方法 title author date CreateTime categories WPF 依赖属性绑定不上调试方法 lindexi 2019 ...

  3. 2019-8-2-WPF-依赖属性绑定不上调试方法

    title author date CreateTime categories WPF 依赖属性绑定不上调试方法 lindexi 2019-08-02 19:56:32 +0800 2019-8-2 ...

  4. JS浏览器类型推断方法

    在网站的前端开发,浏览器兼容性问题这已经让我们抢,Chrome但也生出不知道多少麻烦,我们增加. 浏览器兼容性将由前端开发框架解决的第一个问题.要解决的兼容性问题必须首先准确推断浏览器的类型和它的版本 ...

  5. 通过js引用外部脚本（嘿嘿，方便直接在浏览器上调试抓取代码）

    最近折腾爬虫,后端使用jQuery进行数据采集,一般都是先从浏览器中将采集代码调试好后直接放到后端跑了. 有些网址没有引用jQuery,那调试起来就不方便了,可以用以下代码动态添加script标签,将 ...

  6. 引进js文件运行在浏览器上调试报文件找不到

    原因是jsp文件的路径和js文件不在同一目录下,用"../"将它们的路径配置在同一路径下或者在路径前面加上"<%= request.getContextPath() ...

  7. Charles学习（二）之使用Map local代理本地静态资源以及配置网页代理在Mac浏览器上调试移动端

    前言 我们在开发的过程肯定是一边写代码,一边查看自己的代码写的是否存在问题,那么问题来了,有两种情况 情况一:我们可以本地起服务,那么我们就可以在本地检查自己的代码,查看运行结果 情况二:本地无法起服 ...

  8. js程序的调试方法

  9. PHP在浏览器上跟踪调试的方法以及使用ChromePhp、FirePHP的简单介绍

    之前用ThinkPHP时发现有个 trace 函数可以跟踪调试,感觉很有意思,网上搜索了下类似的东西,发现了 ChromePhp ,以前没想过这样来调试 PHP 程序,感觉非常方便,很有用. Thin ...

随机推荐

  1. Project 10:简单图像的绘制

    目标:绘制如图图像 #include <stdio.h> int main() { int n,i,j,o,k=0; printf("请输入一个数:"); scanf( ...

  2. 非对话框程序创建组合框Groupbox

    对话框程序中的控件,例如button.groupbox之类,是直接放上去的.当然,除groupbox以外,在MFC中其他控件都有相对应的类,以支持程序员在非对话框程序中动态创建控件.而唯独好像没有gr ...

  3. 命令行利用KVM创建虚拟机

    一,实验环境 OS:CENTOS6.5 X86_64 二,KVM宿主环境配置 1.cat /proc/cpuinfo | egrep 'vmx|svm'  //查看是否支持虚拟技术 2.安装KVM相关 ...

  4. 【Alpha阶段】第二次scrum meeting

    每日任务: ·1.本次会议为第二次Meeting会议: ·2.本次会议于今日上午08:30第五社区五号楼下召开,会议时长15min. 一.今日站立式会议照片: 二.每个人的工作: 三.工作中遇到的困难 ...

  5. 201521123081《Java程序设计》 第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  6. 201521123115 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2.书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪 ...

  7. 201521123118《java程序与设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出 ...

  8. 201521123029《Java程序设计》第十一周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synch ...

  9. Java：Object类的equals()方法 如何编写一个完美的equals()方法

    一  代码实例: package freewill.objectequals;  /** * @author freewill * @see Core Java page161 * @desc get ...

  10. javascript中slice() splice() concat()操作数组的方法

    这三个操作数组,哪个返回一个新数组呢.上代码 splice()方法,用于插入,删除和替换. var arr=[1,2,3,4,5]; var arr1=arr.splice(1,3); console ...