首页
|
新闻
|
新品
|
文库
|
方案
|
视频
|
下载
|
商城
|
开发板
|
数据中心
|
座谈新版
|
培训
|
工具
|
博客
|
论坛
|
百科
|
GEC
|
活动
|
主题月
|
电子展
注册
登录
论坛
博客
搜索
帮助
导航
默认风格
uchome
discuz6
GreenM
»
MCU 单片机技术
»
PowerPC
» 用 Firebug 动态调试和优化应用程序(2)HTML 和 CSS 工具
返回列表
回复
发帖
发新话题
发布投票
发布悬赏
发布辩论
发布活动
发布视频
发布商品
用 Firebug 动态调试和优化应用程序(2)HTML 和 CSS 工具
发短消息
加为好友
look_w
当前离线
UID
1066743
帖子
8283
精华
0
积分
4142
阅读权限
90
在线时间
233 小时
注册时间
2017-6-23
最后登录
2019-5-18
论坛元老
UID
1066743
1
#
打印
字体大小:
t
T
look_w
发表于 2018-8-9 10:03
|
只看该作者
用 Firebug 动态调试和优化应用程序(2)HTML 和 CSS 工具
HTML 和 CSS 工具HTML 和 CSS 工具包括:HTML 检查和编辑、CSS 编辑和 CSS 可视化。
检查和编辑 HTML可以使用 HTML 检查特性在源代码中定位可视 HTML。
在 Firebug 窗口,单击
Inspect
。
将鼠标移到任何一个 HTML 组件之上。这样就可以在 Firebug 窗口上看到该 HTML 元素(被蓝色方框围绕)和 HTML 源代码。如图 3 的示例: 图 3. 在 Firebug 检查 HTML
单击选中的 HTML 元素。有趣的是这会使此次检查“锁定”到所选定的元素。
可以转到 Firebug 窗口并单击
Edit
编辑选定的元素。 图 4 给出了 Firebug 编辑窗口以及浏览器窗口中已编辑的文本。“Editing with Firebug” 已经代替了原先的 Ajax 标题。
图 4. 编辑 HTML
在检查元素时,将会看到 Firebug 窗口内的元素嵌套,如图 5 所示:
图 5. 元素嵌套
编辑 CSS 还可以通过检查这个 Web 页面进行 CSS 编辑。Inspection 视图会显示相关的 CSS 条目,包括继承样式。如图 6 的示例:
图 6. CSS 检查
CSS 工具还可用来编辑 CSS 即时属性、禁用属性、自动完成和图片预览,如图 7 所示:
图 7. CSS 图片预览
CSS 的可视化 CSS 的可视化在检查 HTML(回顾 中的蓝色边框)已经展示过了。Firebug Layout 选项卡显示了更多的信息,比如间隙、 偏移和其他相关的量度。图 8 中的布局窗口则显示了一个导航元素的量度:
图 8. CSS 盒的量度
图 9 展示了能即时编辑 CSS 盒的奇妙的 Firebug 特性:
图 9. CSS 盒编辑
收藏
分享
评分
回复
引用
订阅
TOP
返回列表
电商论坛
Pine A64
资料下载
方案分享
FAQ
行业应用
消费电子
便携式设备
医疗电子
汽车电子
工业控制
热门技术
智能可穿戴
3D打印
智能家居
综合设计
示波器技术
存储器
电子制造
计算机和外设
软件开发
分立器件
传感器技术
无源元件
资料共享
PCB综合技术
综合技术交流
EDA
MCU 单片机技术
ST MCU
Freescale MCU
NXP MCU
新唐 MCU
MIPS
X86
ARM
PowerPC
DSP技术
嵌入式技术
FPGA/CPLD可编程逻辑
模拟电路
数字电路
富士通半导体FRAM 铁电存储器“免费样片”使用心得
电源与功率管理
LED技术
测试测量
通信技术
3G
无线技术
微波在线
综合交流区
职场驿站
活动专区
在线座谈交流区
紧缺人才培训课程交流区
意见和建议