此工具是我们的必备工具，以后代码出了问题

我们首先第一反应就是：

  • “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。
  • 菜单： 右击网页空白出---检查

  • 通过开发人员工具小指针工具，查找页面元素
  • 左侧是html页面结构，右侧是css样式

小技巧：

  1. ctrl+滚轮 可以 放大开发者工具代码大小。
  2. 左边是HTML元素结构 右边是CSS样式。
  3. 右边CSS样式可以改动数值和颜色查看更改后效果。
  4. ctrl + 0 复原浏览器大小

0011 开发者工具（chrome）的更多相关文章

  1. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

  2. 浏览器开发者工具Chrome Developer Tool

    开发者工具Chrome Developer Tool https://developers.google.com/chrome-developer-tools/docs/profiles   一直被墙 ...

  3. Chrome开发者工具Debug入门

    译者按: 手把手教你摆脱console.log,掌握高级的debug方法. 原文: Learn How To Debug JavaScript with Chrome DevTools 译者: Fun ...

  4. Chrome开发者工具之测试应用

    一.Chrome开发者工具简介 浏览器的开发者工具(DevTools)可以帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript.jQuery)之类的,还 ...

  5. DevTool开发者工具

    DevTool开发者工具 chrome的开发者工具可以说是十分强大了,是web开发者的一大利器,作为我个人而言平时用到的几率很大,相信大家也很常见,但是不要仅仅停留在点选元素看看样式的层面上哦,跟着我 ...

  6. Chrome 开发者工具(DevTools)中所有快捷方式列表

    Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每个快捷键在Windows/Linux及Mac中的对应键.其中一些快捷键对于Dev ...

  7. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  8. Chrome开发者工具不完全指南（四、性能进阶篇）

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  9. Chrome开发者工具不完全指南（五、移动篇）

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

随机推荐

  1. MyBatis动态SQL（二）

    1.foreach foreach语句用来遍历数组和集合对象.标签中的属性: collection属性:值有三种list.array.map open属性:表示调用的sql语句前缀添加的内容 clos ...

  2. 自定义View系列教程03--onLayout源码详尽分析

    深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...

  3. iptables 伪装(Masquerading)

    「偽装」是一种特殊的SNAT操作:将来自其它电脑的包的来源位址改成自己的位址:请注意,由於入替的来源位址是自动決定的(执行SNAT的主机的IP位址).所以,如果它改变了,仍在持续中的旧连線将会失效.「 ...

  4. LRJ-Example-06-17-Uva10562

    main() 函数中的这两行 fgets(buf[0], maxn, stdin); sscanf(buf[0], "%d", &T); 不能简单替换为 scanf(&qu ...

  5. ELMo解读（论文 + PyTorch源码）

    ELMo的概念也是很早就出了,应该是18年初的事情了.但我仍然是后知后觉,居然还是等BERT出来很久之后,才知道有这么个东西.这两天才仔细看了下论文和源码,在这里做一些记录,如果有不详实的地方,欢迎指 ...

  6. 防止SyntaxHighlighter.js的闪烁闪一下的方法

    SyntaxHighlighter.js是一个代码高亮的JS插件,使用也很简单,但是由于是浏览器段执行JS代码来着色,会出现视觉上闪一下的效果.比如你的20行代码网页打开显示高度为100px,但是Sy ...

  7. Laravel 修改默认日志文件名称和位置

    修改默认日志位置 我们平常的开发中可能一直把laravel的日志文件放在默认位置不会有什么影响,但如果我们的项目上线时是全量部署,每次部署都是git中最新的代码,那这个时候每次都会清空我们的日志,显示 ...

  8. [转]SpringBoot整合Swagger2以及生产环境的安全问题处理

    1.创建springboot项目 https://www.cnblogs.com/i-tao/p/8878562.html 这里我们使用多环境配置: application-dev.yml(开发环境) ...

  9. Codeforces Round #187 (Div. 1 + Div. 2)

    A. Sereja and Bottles 模拟. B. Sereja and Array 维护全局增量\(Y\),对于操作1(即\(a_{v_i}=x\))操作,改为\(a_{v_i}=x-Y\). ...

  10. java Scanner(简单文本扫描器)

    Scanner(File source)  构造一个新的 Scanner,它生成的值是从指定文件扫描的. 备注:实现了Iterable接口   package june6D; import java. ...