前端调试工具(DevTools) 开启:F12 布局 切换PC和移动端 页面元素的快速测试技巧 保持元素的hover等状态:选中当前行点击右键 元素状态改变的监控技巧 触发断点后元素状态不会再改变,可以在sources里关掉断点,也可以重新右键点击删除断点 样式快速定位.修改 定位: 选中相关地方点击右键检查,则会自动跳转到选中元素的样式页面 打开检查工点击图片中的箭头,然后去页面中将鼠标悬浮在修改的地方(常用) 鼠标点击后定位结束 修改: 画横线表示样式被覆盖 在检查工具中做的修改不会更新到本

1.如何清除图片下方出现几像素的空白间隙? /*方法1:*/ img{display:block;} 方法2: /*img{vertical-align:top;}*/ 2.如何让文本垂直对齐文本输入框? input{vertical-align:middle;} 3.如何让单行文本在容器内垂直居中? #test{height:25px;line-height:25px;} /* 只需设置文本的行高等于容器的高度即可 */ 4.如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和act

1. 如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 img { vertical-align: top; } // 除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以 方法3 // #test为img的父元素 #test { font-size: 0; line-height: 0; } 2. 如何让文本垂直对

实际上前端的发展与进步也离不开浏览器的支持,而对于开发者来讲,浏览器最好的支持,就是对于debug的良好支持,甚至在某些兴许接手的项目中,前端的debug甚至能够解决好多问题--不说了,都是泪啊!还是说下firefox下的firebug吧.尽管ff内置一个调试的功能,可是,感觉不完好,对于开发者来讲,根本不够用,于是ff下还是推荐firebug,老牌的前端debug工具,好用!而IE.Chrome都有非常不错的工具支持,基本够用,可是用惯了ff的我,还是坚挺在firebug下. 1.使用"deb

清除图片下方出现几像素的空白间隙 方法1: img{display:block;} 方法2: img{vertical-align:top;} 除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以 方法3: #test{font-size:0;line-height:0;} #test为img的父元素 让文本垂直对齐文本输入框 方法: input{vertical-a

如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的和值都可以 img { vertical-align: top; } 方法3 /* #test为img的父元素 */ #test { font-size: 0; line-height: 0; } 如何让文本垂直对齐文本输入框 input { vertical-align: mi

.ckrating_highly_rated {background-color:#FFFFCC !important;} .ckrating_poorly_rated {opacity:0.6;filter:alpha(opacity=60) !important;} .ckrating_hotly_debated {background-color:#FFF0F5 !important;} .syntaxhighlighter, .syntaxhighlighter a, .syntaxhi

Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而Weinre就是解决这难题的利器. Weinre的本意是Web Inspector Remote,它是一种远程调试工具.功能与Firebug.Webkit inspector类似,可以帮助我们即时更改页面元素.样式,调试JS等,下面就简单介绍下如何使用.下面以以Windows系统为例: 一.首先确保

最近同事在使用 css3 的 transition + tranform 的时候影响了相邻的元素出现bug.或者说相邻的元素出现抖动bug. 然而把 hover 状态的 tranform 属性删了后,发现bug消失,因此断定是其引起的bug.至于 transition + 其他非css3属性会不会有此bug,就不得而知了.有空测试了再告知,如果有哪位大虾测试过,可以留言告知. 解决办法: /* 设置进行转换的元素的背面在面对用户时是否可见:隐藏 */-webkit-backface-visibi

一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二.浏览器模块介绍 由于chrome浏览器一直在不断的进行更新迭代,会不断的新增功能,有一些老的功能会被摒弃掉,所以我们介绍这个功能的时候是以这个系列文章发布时候的最新版为主(2018-01-05 ) 1. 用来选择所需要的HTML元素,通过HTML元素定位到Elements中的对应代码 2. 用来在手

三.chrome调试工具实战 3.1 获取界面对应的HTML和修改样式 我们以博客园为例子来分析. 通过上面的操作就可以定位到对应的HTML代码 左侧菜单显示的就是当前指定元素层叠样式的一个情况 上面的图片中的内容是可以随意添加的,但是如果是只操作于一个元素,那么我们直接在最顶层上面添加样式就好. :hov 按钮可以模拟hofv的操作 :cls 可以给元素添加class 下面我们来演示模拟标题的一个hover事件 3.2 快速定位对应元素上面的事件 还是以上面的同一个标题为例: 我们把右侧菜单切

一些不做解释的关键字是在js中预留的东西. abstract 抽象  . arguments  参数 标识符arguments是指向实参对象的引用,实参对象是一个类数组对象. boolean 布尔值. break 跳出, byte,字节 const 常量 class类 char 字符 catch 捕捉 用来捕捉错误的. case  容器箱 代码块 continue 连接 跳过当前代码块 直接进去下一个程序, debugger 调试工具 断点. default  违约 不执行.系统默认值. del

Android调试工具之ADB 1.     什么是ADB adb的全称为Android Debug Bridge,顾名思义,这个是PC机与Android设备的连接桥.简单的说,就是通过adb ,PC可以控制与之相连的Android设备. 通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具.adb的工作方式比较特殊,采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯. 2.     ADB的功能 常用的功能如下: (1) 

kdump简介 kdump是系统崩溃的时候,用来转储运行内存的一个工具. 系统一旦崩溃,内核就没法正常工作了,这个时候将由kdump提供一个用于捕获当前运行信息的内核, 该内核会将此时内存中的所有运行状态和数据信息收集到一个dump core文件中以便之后分析崩溃原因. 一旦内存信息收集完成,可以让系统将自动重启. kdump是RHEL5之后才支持的,2006被主线接收为内核的一部分.它的原理简单来说是在内存中保留一块 区域,这块区域用来存放capture kernel,当production

原文地址:http://www.cnblogs.com/MuYunyun/p/5678405.html#3471461 阅读目录 Chrome调试工具介绍: 快速切换文件 在源代码中搜索 在源代码中快速跳转到指定的行 使用多个插入符进行选择 设备模式 格式化凌乱的js源码 颜色选择器 改变颜色格式 强制改变元素状态(方便查看不同状态下元素的样式) 利用chrome来查看和编辑本地文件 选择下一个匹配项 可视化的DOM阴影 奇淫技 Chrome Dev开发者选项 总结 几个月前转用Chrome后,

1.1 gdb符号调试器简介 gdb是一个用来调试C和C++程序的功能强大的调试器,它能在程序运行时观察程序的内部结构和内存的使用情况. gdb主要提供以下几种功能: 监视程序中变量值的变化 设置断点,使程序在指定的代码行上暂停执行,便于观察 单步执行代码 分析崩溃程序产生的core文件 gdb filename(执行文件名) 编译时需加上-g 或 -ggdb3 选项 1.2 gdb功能详解及其应用 1.2.1调试步骤 1.调用gdb gdb filename 2.设置断点并调试 break f

在web开发中,浏览器开发者工具是我们常用的调试工具.我们经常会有这样的需求,就是查看元素的时候需要查看它的hover样式.相信有很多小伙伴都遇到过这样的情形,始终选不中hover后的元素状态.其实在开发者工具中是有地方可以设置的.方法如下: 1. 打开开发者工具,选中一个元素,结果如下图: 2. 在上图中的 Filter 栏中点击 :hov 按钮,如下图: 3. 点击 :hov 按钮后会显示一系列状态的复选框,我们要查看 hover 状态下的样式,那么就将 :hover 复选框选中即可, 如下

初学时大多使用print或log调试程序,这在小规模的程序下很方便 但是更好的方法是一边运行一边检查里面的变量和方法 1.Pdb Pdb是一个交互式的调试工具,集成于Python标准库中 Pdb能让你根据需求跳转到任意的Python代码断点.查看任意变量.单步执行代码,甚至还能修改变量的值,而不必重启程序 ⚠️pdb 调试有个明显的缺陷就是对于多线程,远程调试等支持得不够好,同时没有较为直观的界面显示,不太适合大型的 python 项目. 而在较大的 python 项目中,这些调试需求比较常见,

最近在写一个日历控件,控件中使用了table 来显示日期.在css 文件中利用 td:hover 设置td 背景色时 一直没起作用.上百度google 了一下,网上大部分人遇到的都是在td:hover 中留有了不必要的空格,或者 tr 的颜色覆盖了td .我检查了自己的css 文件,都没这两个问题.设置button 元素的hover 选择器时,功能是正常的.初步怀疑设置冲突了. 经过逐步排查,最后发现如果在js 程序中设置了td 背景色,td:hover 再设置背景色时,就没起作用.背景色还是保

浏览器调试工具使用总结 一. console使用 console.table(),可以把对象输出成表格的形式,直观的观察数据. console.dir(),可以直观观察dom元素的对象形式 二. $的使用 $('selector'),获取查询到的第一个dom元素 $$('selector'),查找符合selector的所有元素,相当于document.querySelectorAll() $_,获取控制台上一次输出结果 $0,获取选中的dom元素 $i,是一个console impoter插件,

CSS3 1.边框图片 border-image: url(test.png) 10/10px;  outline:10px solid #ff0;outline-offset:15px;边框的边框,两边框之间距离 2.三角形   span{display:inline-block;border:50px solid transparent;border-top-color:red;border-left-color:red;} 3.背景大小  background-size:50%/100px