喜欢从业的专注,七分学习的态度。

360浏览器-开发工具

谷歌-开发工具

IE-开发工具

Web开发中最最烦琐的莫过于调整CSS和JS,而最方便最高效的方式就是利用浏览器的开发工具调整。CSS可以实时调整展现,JS可以断点、监控。那么这个最最方便的工具怎么打开,统一按下键盘F12.

不同浏览器不同版本对应开发工具也不一样,但基本原理都一致。最常用的有这些功能:移动设备、Elements、Source、Network、

常用

移动设备

移动设备是指将Web页面从PC展示切换到手机模式,用于模拟手机上调试Web界面。手机模式能够适配手机大小并配备一些常用手机型号,方便快捷实现各类手机的屏幕适配。

手机模式

Elements

Elements 是指Web界面的元素,是调试CSS的关键。Elements界面包括元素区域、CSS区域、边界区域。

Elements

技巧1-捕捉元素

  • 点击元素区域的元素,CSS区域显示选中元素的所有css属性,边界区域会显示选中元素的大小、边框、margin\padding值。
  • 使用捕获工具,直接到界面上点击元素,元素区域会直接显示选中元素,CSS区域显示选中元素的所有css属性,边界区域会显示选中元素的大小、边框、margin\padding值。

捕获工具

技巧2-修改元素

  • 在元素区域修改,双击元素弹出修改,可修改内容,属性。如给2017-5-5按钮增加浅色边框:双击style,写入:border:1px solid #fce7e5;

修改后

修改完成后,在CSS区域会同步展示增加的CSS样式。

  • 在CSS区域修改。
    括号最下面单机可新增CSS项,括号左侧复选框可以取消和生效CSS;

    新增CSS项

    双击CSS值,可以修改值;

修改值
  • 在边界区域修改。
    边界区域可以修改元素大小和margin、padding值,修改后在界面实时展示修改后的效果。

NetWork

待续.

开发工具调试修改是方便对元素的实时修改展示,对于源文件的修改需要调试完成后将调试修改的内容到源文件中修改才能最终完成修改。

工具越来越方便,开发越来越高效。

Web开发标配--开发人员工具-F12的更多相关文章

  1. 关于IE开发人员工具(F12)找不到的问题

    关于IE开发人员工具(F12)找不到的问题 解决方案:第一步,像往常一样F12或者,工具->开发人员工具,点击后,这个时候你是看不到工具界面(当然,如果你正好遇到了找不到这个问题);第二步,这个 ...

  2. 奥展项目笔记01--不同网站,点击工具--开发人员工具F12,显示的页面怎么不一样

    开发人员工具F12,显示的页面不一样: 样式1: 样式2: 解决方案:兼容模式和极速模式的开发者工具不一样,改成极速模式就ok了.

  3. Web开发标配--开发人员工具-JS调试

    喜欢从业的专注,七分学习的态度. JS:全称JavaScript,Web中,js主要在两个地方: html的<script type="text/javascript"> ...

  4. F12 开发人员工具中的控制台错误消息

    使用此参考解释显示在 Internet Explorer 11 的控制台 和调试程序中的错误消息. 简介 使用 F12 开发人员工具进行调试时,错误消息(例如 EC7111 或 HTML1114)将显 ...

  5. IE的F12开发人员工具不显示问题

    按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的缩略图上,右键-最大化,工具就全屏出现 ...

  6. IE的F12开发人员工具不显示

    IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的 ...

  7. IE8按F12不显示开发人员工具窗口

    转:http://www.cnblogs.com/micromouse/archive/2010/07/11/1775174.html 网上搜来的,记录一下,免得以后忘了 F12将开发人员工具启动后, ...

  8. IE11 开启F12开发人员工具中的 始终从服务器刷新

    在进行页面脚本调试时,经常需要清除浏览器缓存来获取最新的脚本文件,IE11之前的浏览器版本我们可以按F12调出开发人员工具,在缓存选项中开启"始终从服务器中刷新"的设置后我们就不需 ...

  9. windows7系统下升级到IE11时无法使用F12开发人员工具的解决办法

    windows7系统下升级到IE11时,发现F12开发人员工具无法使用,打开都是空白的 解决办法,就是下载IE11的补丁,下载地址为:https://www.microsoft.com/zh-CN/d ...

随机推荐

  1. hello word-python 入门

    今天正式开始学习python,先写一个最今经典的例子 helloword #!/usr/bin/python3.2 print("hello work!") 知识点: #!usr/ ...

  2. amazeui学习笔记一(开始使用3)--兼容性列表compatibility

    amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...

  3. 非极大值抑制(non-maximum suppression)的理解与实现

    非极大抑制(Non-Maximum Suppression) Non-Maximum Suppression for Object Detection in Python RCNN 和微软提出的 SP ...

  4. Android Studio运行报错,Cannot find System Java Compiler. Ensure that you have installed a JDK......

    详细报错信息如下 Error:Execution failed for task ':app:compileDebugJavaWithJavac'. > Cannot find System J ...

  5. ORACLE10g R2【RAC+ASM→RAC+ASM】

    ORACLE10g R2[RAC+ASM→RAC+ASM] 本演示案例所用环境:RAC+ASM+OMF   primary standby OS Hostname node1,node2 dgnode ...

  6. Android车载导航的一些困境

    车载导航从最初的用解码芯片,过渡到用WinCE系统,已经形成了一个较大的产业.车载导航使用上的一些大原则,基本上被固定了下来.如今WinCE走到了尽头,Android车载导航開始发力,但由于Andro ...

  7. C#自定义配置文件节的实现

    1.配置文件:(注意configSections必须放在最上面否则会报错) <?xml version="1.0" encoding="utf-8" ?& ...

  8. 10.9 android输入系统_APP跟输入系统建立联系和Dispatcher线程_分发dispatch

    12. 输入系统_APP跟输入系统建立联系_InputChannel和Connection核心: socketpair // 第9课第3节_输入系统_必备Linux编程知识_任意进程双向通信(scok ...

  9. linux下查看动态链接库依赖关系的命令 x86: ldd *.so arm: arm-linux-readelf -d *.so 实际例子: 以项目中用到的库librtsp.so分析: lijun@ubuntu:~/workspace$ arm-hisiv100nptl-linux-ld -d librtsp.so arm-hisiv100nptl-linux-ld:

    linux下查看动态链接库依赖关系的命令 x86:ldd    *.so arm:arm-linux-readelf    -d    *.so 实际例子:以项目中用到的库librtsp.so分析:l ...

  10. go 字符串 数字 整型 浮点 转换

    import "strconv" //先导入strconv包 // string到int int, err := strconv.Atoi(string) // string到in ...