css 调试方法总结

本总结不断更新,主要记录本人调试过程中所终结的经验与方法。

毕竟本人不是做浏览器前端的,所以如有不详敬请见谅。

css关系到界面的美观,有时候功能实现了。界面确丑到没人用,终归还是一件失败的产品,所有好的产品不仅需要实用的功能,更加需要贴心美观的外观。

1.如果遇到整体布局工整,个别布局偏移的。

可以使用浏览器取道偏移的组件(放大镜),然后得到应用到这个组件的css文件中的css效果进行修改即可,如下图所示:

可以再右边获取到css样式,以及css详细信息:

查看到样式后,还可以看到对应样式所属于的文件,找到这个文件再进行样式修改即可。

以及css详细信息:

如上右图所示:

这里可以观测到这个组件的大小:宽:177+10+10,高:18+8+8

组件的内边距:padding:10

组件的边界:border:组件的边界表示这里外边就不是这个组件的组成部分了。

如上左图:

在边界外边还可以有外边界:margin:表示这个组件空出的长和宽

css 调试方法总结,布布扣,bubuko.com

时间: 2024-10-11 14:42:03

css 调试方法总结的相关文章

移动端开发调试方法总结

作者本人经验浅薄,还望大神批评指教. ? 移动端调试方法总结,移动端调试方法大致有四种:1.chorme的开发者平台调试,2.Fildder 远程调试,3.Chrome Inspect 真机调试,4.wenwire 远程调试 ? 1.chorme 开发者平台(F12) ? ? 这种调试方法是在开发前期最常用的一种手段,如果对chrome开发者平台很熟悉,开发效率那绝对是事半功倍. chrome开发者调试常用的5部分: 1.Elements 调试样式,打入断点 2.NetWork 观察网络请求 3

JavaScript调试方法

一.console.log和debugger调试方法 这两种方法使我们一般最喜欢的调试方法 一旦执行到这行代码,Chrome 会在执行时自动停止. 你甚至可以使用条件语句加上判断,这样可以只在你需要的时候运行. if (thisThing) { debugger; } 这两种方法还有一个弊端,有人形容他们两的词语用到了肮脏,哈哈哈哈哈 (之所以形容他肮脏主要是因为调试完后还要删除这段代码) 二.console.table方法进行调试 当遇到一个对象时,我们需要看到他的值,一般我们会使用到cons

Web开发常规调试方法与常见问题分析

一.Web项目基本原理 现在的web项目大都已经前后端独立开发与部署. 前后端独立开发,一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流.前端开发人员先更具业务需求与实际原型进行ui的编程实现与事件的设计,并通过web接口进行业务数据的增删改查.后端开发人员根据定义的接口文档,实现业务数据的计算与增删改查,并对持久化的数据(一般保存在数据库里)进行操作. 前后端独立部署,前端项目均为html5/css/javascript/图片等静态资源,只需要web服务

Windows 下常见的反调试方法

稍稍总结一下在Crack或Rervese中比较常见的一些反调试方法,实现起来也比较简单,之后有写的Demo源码参考,没有太大的难度. ①最简单也是最基础的,Windows提供的API接口:IsDebuggerPresent(),这API实际上就是访问PEB的BeingDebugged标志来判断是否处于调试状态. if (IsDebuggerPresent()) //API接口 { AfxMessageBox(L"检测到调试器"); } else { AfxMessageBox(L&qu

VC的常用调试方法

前言 VS是非常强大的IDE,所以掌握VSVC的常用方法,将会使得我们找出问题解决问题事半功倍. 目录 VSVC的常用调试方法 前言 1. Watch窗口查看伪变量 2. 查看指针指向的一序列值 3. 内存泄露查找 4. 调试Release版本 5. 远程调试 6. 函数断点 7. 数据断点. 8. 代码执行时间 9. 格式化数据 10. 格式化内存 Watch窗口查看伪变量 按MSDN的介绍,伪变量就是用来查看特定信息的术语.例如当调用的API失败时,可以用GetLastError获取对应的错

调试方法

一. 调试模式ThinkPHP 专门为开发过程而设置了调试模式,调试模式开启后,特别方便我们进行排错和调整.但由于它执行效率会稍低,所以在正式部署项目的时候,关闭调试模式. 1 // 入口文件处,开启调试模式 建议开发阶段开启 部署阶段注释或者设为false 2 define('APP_DEBUG',t t rue); 开启来会告诉你错误的一些具体信息,部署项目后,错误信息是给用户看的,这时不需要列出错误的具体信息在哪 下图为用户看到的错误页面 调试模式在开发中的优势在于: 1.开启日志记录,任

Android快速调试方法

Android快速调试方法 前言:目前市面上OTT网络机顶盒几乎全部使用Android系统,公司目前是多个人使用一个编译服务器,编译一次Android系统花费时间较长,调试Android某一部分功能时候就不得不编译整个Android系统来调试,严重降低了工作开发效率,巧合之下看到公司大牛写的Android调试方法,放与网络与大家参考学习. 公司网络机顶盒(OTT)盒子使用Amlogic提供的芯片,下面就以amlogic Android系统为例. 1 Uboot快速调试方法 1.1 编译 #! /

Firefox下javascript调试方法

前面博文谈了一下IE浏览器下javascript的调试方法,今天没事干就把火狐浏览器(Firefox)下的javascript调试方法也看了一下,记录在此,希望对大家有所帮助. 我们这次使用的代码页面为document获取对象博文中的按name属性获取对象的代码. <html> <head> <title>getElementsByName</title> </head> <body> <form id="form1&

实验4:掌握Android应用调试方法、添加新界面

第四章代码清单: Android应用调试方法 第五章代码清单: 添加新界面