zoukankan      html  css  js  c++  java
  • 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的开发必备小技巧[译]

  • 相关阅读:
    php 安装shpinx扩展
    sphinx 配置实例
    java系统监控分析Jprofile下载及安装配置【转】
    Java监控工具介绍,VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试【转】
    Java虚拟机性能管理神器
    Java虚拟机性能管理神器
    Java虚拟机性能管理神器
    Java虚拟机性能管理神器
    Java虚拟机性能管理神器
    jvisualvm图解【转】
  • 原文地址:https://www.cnblogs.com/ooo0/p/8298640.html
Copyright © 2011-2022 走看看