和它的innerhtml，由于document.getElementsByTagName是动态的，所以这个得到的结果肯定是动态的
对象输出
var o = {
name:"Lily",
age: 18
};
console.dir(obj);//显示对象自有属性和方法
对于多个对象的集合，你可以这样，输出更清晰：
var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
console.log(stu);
console.table(stu);
成组输出
//建立一个参数组
console.group("start"); //引号里是组名，自己起
console.log("sub1");
console.log("sub1");
console.log("sub1");
console.groupEnd("end");
函数计数和跟踪
function fib(n){ //输出前n个斐波那契数列值
if(n == 0) return;
console.count("调用次数");//放在函数里，每当这句代码运行输出所在函数执行次数
console.trace();//显示函数调用轨迹(访问调用栈）
var a = arguments[1] || 1;
var b = arguments[2] || 1;
console.log("fib=" + a);
[a, b] = [b, a + b];
fib(--n, a, b);
}
fib(6);
注：Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。
计时
console.time() //计时开始
fib(100); //用上述函数计算100个斐波那契数
console.timeEnd() //计时结束并输出时长
断言语句，这个c++调试里面也经常用到。js中，当第一个表达式或参数为true时候什么也不发生，为false时终止程序并报错。
console.assert(true, "我错了");
console.assert(false, "我真的错了");
性能分析
function F(){
var i = 0;
function f(){
while(i++ == 1000);
}
function g(){
while(i++ == 100000);
}
f();
g();
}
console.profile();
F();
console.profileEnd();
注：Chrome开发者工具中的Audits标签页也可以实现性能分析。
debugger
这个重量级的是博主最常用的，可能是c++出身，对于单步调试由衷的热爱。单步调试就是点一下，执行一句程序，并且可以查看当前作用域可见的所有变量和值。而debugger就是告诉程序在那里停下来进行单步调试，俗称断点。
右边按钮如下：
Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。
Step over next function call：执行到下一步的函数调用（跳到下一行）。
Step into next function call：进入当前函数。
Step out of current function：跳出当前执行函数。
Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。
Pause on exceptions：异常情况自动断点设置。
其实右侧还有很多强大的功能：
Watch：Watch表达式
Call Stack: 栈中变量的调用，这里是递归调用，肯定是在内存栈部分调用。
Scope：当前作用域变量观察。
BreakPoints：当前断点变量观察。
XHR BreakPoints：面向Ajax，专为异步而生的断点调试功能。
DOM BreakPoints：主要包括下列DOM断点，注册方式见下图：
当节点属性发生变化时断点（Break on attributes modifications）
当节点内部子节点变化时断点（Break on subtree modifications）
当节点被移除时断点（Break on node removal）
chrome中的调试技巧
1、DOM元素的控制台书签：Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素，那么$0 表示C元素， $1 表示B元素， $2 表示A元素（这个和正则表达式的$符号类似，不过顺序不同）。
2、如果你想调试f函数，用debug(f)语句可以增加这种断点。
3、Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。
4、可以用Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）格式化压缩后的代码。
5、在Network面板，选择一个资源文件，右键Copy Response可快速复制响应内容。
6、利用媒体查询，这个主要是在Device Mode调节不同的分辨率显示。
7、选择Elements，按 Esc > Emulation > Sensors进行传感器模拟。
8、点击渐入效果样式图标（紫色图标），可以预览动画效果，并可对相应的贝塞尔曲线(cubic-bezier)进行调节动画效果。
9、在Source中按住Alt键并拖动鼠标进行多列内容选择。
10、Elements面板右键执行DOM元素节点，选择Force Element State或者点击右侧Toggle Element State图标可以出发伪类。
11、Network面板中选择一张图片，在右侧图片上鼠标右键选择copy it as a Data URI,就可以获取图片的Data URL (base64编码)。
12、通过按住Ctrl键可以添加多个编辑光标，同时对多处进行编辑。按下Ctrl + U可以撤销编辑。
13、Elements面板右侧的Style编辑器中，点击颜色十六进制编码前的小色块，会弹出一个调色板。
14、按下Alt键并且鼠标双击选择DOM元素前面的箭头，就会展开该DOM元素下的所有字节点元素.
15、快捷键：
调试过程注意事项
1、避免记录引用类型
当记录对象或数组时，永远记得你在记录什么。记录原始类型时，使用带断点的watch表达式。如果是异步代码，避免记录引用类型。
var arr = [{ num: 0 }];
setInterval(function(){
console.log(arr);
arr[0].num += 1;
}, 1000);
这里，第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时，num的值就已经确定了。之后无论你对同一个引用重新打开多少次都不会变化。
2、尽可能使用 source map。有时生产代码不能使用source map，但不管怎样，你都不应该直接对生产代码进行调试。
来自：https://segmentfault.com/a/1190000016256731
推荐阅读
-
本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式，然后详细介绍了相关API，包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List，以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较，指出了JSON的优势和缺点。 ...
[详细]
蜡笔小新 2023-12-11 16:20:50
-
最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
-
-
JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ...
[详细]
蜡笔小新 2023-12-11 11:40:52
-
目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ...
[详细]
蜡笔小新 2023-12-14 15:03:14
-
本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
-
本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因，文件需要分割成多个部分发送，因此无法按顺序接收。文章中提供了merge2.php的源码，通过使用shuffle函数打乱文件读取顺序，实现了乱序合并文件的功能。同时，还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ...
[详细]
蜡笔小新 2023-12-14 04:33:19
-
本文探讨了C语言中指针的应用与价值，指针在C语言中具有灵活性和可变性，通过指针可以操作系统内存和控制外部I/O端口。文章介绍了指针变量和指针的指向变量的含义和用法，以及判断变量数据类型和指向变量或成员变量的类型的方法。还讨论了指针访问数组元素和下标法数组元素的等价关系，以及指针作为函数参数可以改变主调函数变量的值的特点。此外，文章还提到了指针在动态存储分配、链表创建和相关操作中的应用，以及类成员指针与外部变量的区分方法。通过本文的阐述，读者可以更好地理解和应用C语言中的指针。 ...
[详细]
蜡笔小新 2023-12-13 15:02:30
-
本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
-
本文介绍了搭建iOS超签签名服务器的原因和优势，包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势，即一个证书只能安装100个，成本较高。文章还详细介绍了超签的实现原理，包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后，还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ...
[详细]
蜡笔小新 2023-12-11 20:23:23
-
本文介绍了绕过WAF的XSS检测机制的方法，包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法，该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型（DOM）接收器和源、实施适当的跨域资源共享（CORS）策略和其他安全策略，可以有效阻止XSS漏洞。但是，WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制，构建与正则表达式不匹配的XSS payload。 ...
[详细]
蜡笔小新 2023-12-11 19:42:30
-
本文介绍了Android中的assets目录和raw目录的共同点和区别，包括获取资源的方法、目录结构的限制以及列出资源的能力。同时，还解释了raw目录中资源文件生成的ID，并说明了这些目录的使用方法。 ...
[详细]
蜡笔小新 2023-12-11 12:26:25
-
本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展，用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法，并给出了一个示例代码。最后，提到了JSX在编译后会被转化为普通的JavaScript对象。 ...
[详细]
蜡笔小新 2023-12-11 11:37:05
-
本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
-
本文介绍了使用EPPlus绘制刻度线的方法，并提供了示例代码。通过ExcelPackage类和List对象，可以实现在Excel中绘制刻度线的功能。具体的方法和示例代码在文章中进行了详细的介绍和演示。 ...
[详细]
蜡笔小新 2023-12-10 19:32:38
-
本文介绍了2015年九月八日的js学习总结及相关知识点，包括参考书《javaScript Dom编程的艺术》、js简史、Dom、DHTML、解释型程序设计和编译型程序设计等内容。同时还提到了最佳实践是将标签放到HTML文档的最后，并且对语句和注释的使用进行了说明。 ...
[详细]
蜡笔小新 2023-12-10 11:10:08
-
京公网安备 11010802041100号