• js 调试技巧


     快捷键

    1.快速查看HTML中dom元素绑定那些JS事件方法

      chrome中      F12-->Elements-->Event Listenners

      参考:https://jingyan.baidu.com/article/642c9d34e7d6df644a46f7c1.html

    2.快速定位js函数

      chrome中   console控制台中输入该函数名 回车

    3.在源代码中搜索

      Chrome调试器  按下Ctrl+Shift+F  在输入框中输入想查询的源代码

    4.快速查找文件

      Chrome调试器 按下Ctrl+P 搜索你想打开的文件名

    5.跳到指定行

      Chrome调试器 按下Ctrl+G

      另一种,方法就是Ctrl+O,输入”:”+行数

    6.选中下一个匹配项

      选中一个匹配项后,利用Ctrl+D,就会将下一个相同的匹配项也选中,该功能可以帮助你同时编辑它们。

    Chrome调试器功能

    1.强制改变元素状态功能

    2.改变颜色格式

      在颜色预览中,通过Shift + 鼠标点击,就可以在rgba,hsl和hexadecimal三种格式中,来回切换。

    3.保存日志

      在console面板上勾选‘保存日志’'preserve log'选项,则不会在你每次加载页面时,清空日志。当你想要调查页面关闭前的bugs时,可要记住这一选项哦。

      network面板中也有该选项

    4.提高文件内容的可读性 格式化代码

     5.颜色选择器

    6.在控制台(Console)中获取DOM元素

      Chrome控制台,提供了方法和变量来快速获取页面中的DOM元素,如下:

      1、$()—就是document.querySelector()原生方法的映射。功能嘛,就是获取并返回第一个与填写的CSS属性匹配的DOM元素,如$(‘div’)就会返回第一个出现在页面中的div元素。

      2、$$()—就是document.querySelectorAll()原生方法的映射。功能嘛,就是获取并返回一个数组,数组中包含了所有与你填写的CSS属性匹配的DOM元素。

      3、$0--$4—代表你在Chrome调试器中操作不同DOM元素的历史记录,且最多记录5次,故而只有$0-$4这五个变量。$0代表最近一次,依次类推。

    参考: 15个关于Chrome的开发必备小技巧[译]

  • 相关阅读:
    java常用类库
    汇编子程序使用
    Flsk&pyecharts 动态数据可视化
    2019年全国高校计算机能力挑战赛初赛C++语言解答
    搞定vscode编写java(手把手篇)
    搞定vscode编写java
    2019年全国高校计算机能力挑战赛初赛java语言解答
    Java大数类 BigInteger
    2019年全国高校计算机能力挑战赛初赛C语言解答
    二叉搜索树BST(C语言实现可用)
  • 原文地址:https://www.cnblogs.com/ooo0/p/8298640.html
Copyright © 2020-2023  润新知