美文网首页
Chrome 调试技巧

Chrome 调试技巧

作者: shelhuang | 来源:发表于2018-12-31 20:29 被阅读0次

1.console

DOM输出

var ul = document.getElementsByTagName("ul");console.dirxml(ul); 

对象输出

var o = { name:"Lily", age: 18};console.dir(obj);

table输出

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);

2.单步调试

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中的Call Stack:可以查看调用堆栈,跳到调用这个方法的地方

相关文章

  • Chrome调试技巧

    调试技巧,对于前端小白来说,是必不可少的技能。掌握各种调试技巧,可以快速定位问题、帮助分析逻辑错误等。本文介绍一些...

  • Chrome 调试技巧

    写在前面本文包括浏览器调试,不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了...

  • chrome调试技巧

    调整数值的时候,按住alt+⬆️,每次数值增加10%按住shift+⬆️,每次增加数值10;hsl颜色的调试:h:...

  • Chrome 调试技巧

    alert 这个不用多说了,不言自明 console 基本输出 想必大家都在用console.log在控制台输出点...

  • chrome调试技巧

    chrome调试技巧 dom的右边的弹出窗的功能 分为几个部门 上面是dom修改的 添加编辑属性 编辑html 删...

  • chrome调试技巧

    $0 鼠标左键按住可拖动 编辑html选中后f2编辑元素选中后回车编辑css 选中后h临时隐藏元素选中后右键点击s...

  • Chrome 调试技巧

    1.console DOM输出 var ul = document.getElementsByTagName("u...

  • Chrome调试技巧

    Chrome DevTools — JS调试 技巧 将文件加入小黑盒,f10、f11下一步时可跳过小黑盒文件Sou...

  • Chrome调试技巧

    前言 Chrome Devtools应该是每一位做前端都会用到的一个工具吧! 菜单面板结束 Elements 页面...

  • 【Chrome】Chrome 调试小技巧

    1. 用Chrome浏览器长截屏 2. 修改UserAgent 修改为: 重启浏览器

网友评论

      本文标题:Chrome 调试技巧

      本文链接:https://www.haomeiwen.com/subject/sjvwlqtx.html