zoukankan      html  css  js  c++  java
  • 浏览器开发者工具使用技巧

    浏览器开发者工具使用技巧

    学习网址:

    https://developers.google.cn/web/tools/chrome-devtools/

    http://www.css88.com/doc/chrome-devtools/javascript/add-breakpoints/

    1.使用开发者工具

        Chrome : F12 / ctrl+shift+i /选项-》更多工具 =====>打开开发者工具

    【1】设置开发者工具窗口显示位置(默认居右显示,可以设置居下,居左或与当前页面分离)

    【2】HTML和CSS调试工具(Element元素里面调试)

    拼写检查     可编辑样式(修改、添加、删除均可)

    styles栏:hov也可以模拟鼠标移动到元素上的效果,.cls可以给元素直接加class,+添加样式

    可在开发者工具中直接添加元素、删除元素、隐藏元素、复制HTML元素(copy outerHTML)

    若有鼠标点击上去显示的效果样式,可以选中后,右键-》检查  即可。

    【3】JS调试工具(Source面板中调试)

    (1)可以观察某个调试变量的值的变化

            选中要观察的值-》Add selected text into to watches..-》

            

    【4】与后台对接错误调试

    【5】事件监听断点

  • 相关阅读:
    阅读计划博文
    系统设计时所实现的质量属性战术
    关于如何提高系统的可用性和易用性
    jdbc.properties
    JDBCUtil
    软件质量属性的场景描述
    架构漫谈阅读笔记
    软件架构师工作过程
    orm框架中entityframework的 增删改查操作
    事件和委托
  • 原文地址:https://www.cnblogs.com/kaixinyufeng/p/8157354.html
Copyright © 2011-2022 走看看