zoukankan      html  css  js  c++  java
  • chrom浏览器-F2使用方法一

       由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!

    首先介绍Chrome开发者工具中,调试时使用最多的三个功能页面是:元素(ELements)、控制台(Console)、源代码(Sources),此外还有网络(Network)等。

     

     元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
    控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。
    源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
    网络(Network):网络页面主要用于查看header等与网络连接相关的信息。
    1、元素(Elements)

    查看元素代码:点及如图箭头(或用者用快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置 。

    查看元素属性:可从被定位的源码中查看部分,如class、src,也可在右边的侧栏中查看全部的属性,如下图位置查看

     修改元素的代码与属性:可直接双击想要修改的部分,然后就进行修改,或者选中要修改部分后点击右键进行修改,如下图

     

    注意:这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。

    右边的侧栏个功能的介绍:如下图所示

     

     2、控制台(Console)

    查看JS对象的及其属性

    执行JS语句
    查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉。
    3、源代码(Sources)其主要功能如下介绍

     

     4、网络(Network)大体功能如下:

     

    请求文件具体说明

     

    一共分为四个模块:

    Header:面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
    Preview:预览面板,用于资源的预览。
    Response:响应信息面板包含资源还未进行格式处理的内容
    Timing:资源请求的详细信息花费时间
    ---------------------
    作者:Self_Growing
    来源:CSDN
    原文:https://blog.csdn.net/m0_37724356/article/details/79884006
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    简单命令行总结
    [大餐]开发摘记1--我的Fragment通信的框架 | 卖牙膏的芖口钉
    DZNEmptyDataSet的使用
    Java笔记(一)
    mingster.com
    2014新年福利,居然有人将Ext JS 4.1的文档翻译了
    【翻译】Sencha Touch 2入门:创建一个实用的天气应用程序之三
    【翻译】在Ext JS应用程序中使用自定义图标
    【翻译】Siesta事件记录器入门
    【翻译】使用新的Sencha Cmd 4命令app watch
  • 原文地址:https://www.cnblogs.com/jingdenghuakai/p/10917627.html
Copyright © 2011-2022 走看看