当前位置: 首页 > 编程日记 > 正文

Firefox插件

为什么80%的码农都做不了架构师?>>>   hot3.png

网站优化必备的9个Firefox插件

在网页设计制作中经常使用到的火狐浏览器插件工具:


1. Firebug

Firebug是开发人员们钟爱火狐浏览器的一个重要原因,Firebug是火狐浏览器上一个集成式的强大调试环境,很多调试应用插件都 必须基于Firebug平台,包括下面会介绍到了一些Web测试和调试工具,所以Firebug可以说是每一个Web设计开发人员必备的工具。

Firebug – Firefox 插件安装

按照提示安装到Firefox中之后,在浏览器底部状态栏就可以看到Firebug的图标,点击之后弹出firebug调试窗口,这里面有除了Firebug自身的工具外,其他选择性安装的Firebug平台插件的调试入口,比如Page Speed等。

2. Page Speed

Google于今年4月确认将网页加载速度作为排名因素之后,站长们对页面性能更加重视。其实无论是对SEO而言,还是对用户体验而言,提高页面的加载速度都相当重要。Google也提供了这枚检测页面加载速度的工具。

Page Speed插件是基于firebug平台的火狐插件,它为每一个页面进行加载速度评分,不仅如此,更提供了优化建议,因此,有改进网页加载性能的页面优化人员,这个工具是非常的必须。

Page Speed for firefox– Google官方插件安装

安装以后,Page Speed就会出现在Firebug窗口中,可以为浏览器的当前页面检测加载性能,点击Page Speed界面中的“Analyze Performance”按钮执行分析,Page Speed会为分析的页面进行评分,满分100分,评分当然越高越好,不过优化的目标应该是达到85分以上。

3. Web Developer

从这个工具名称应该能够大概猜到它的用途,没错,这是一个集众多页面测试功能于一身的强大火狐插件,能够查看CSS错误和Cookies 信息,设置突出显示表格、Heading、图片URL等几乎所有页面元素,这对页面调试非常有用,尤其当页面结构非常复杂的时候,这些工具能够让你快速找 到特定元素的分布。

小陆平时很喜欢用这个工具来查找页面的实效图片,因为在火狐里,实效的图片不会像IE那些显示小红叉。

Web Developer – Firefox插件安装

安装以后作为一个工具栏出现在浏览器中,如下图:

4. HTML Validator

网页符合W3C标准十分重要,一方面是为了让页面能够跨浏览器兼容,另一方面也是为了让搜索引擎能够顺利的抓取和理解你的页面。所有让页 面通过W3C校验是网页优化工作很重要的一方面,使用HTML Validator能够高效的检测页面的HTML代码有效性,不仅如此,它还能显示出错的代码位置,并给出错误说明和修改建议,是个非常不错的工具。

HTML Validator – Firefox插件安装

安装完成以后,在火狐浏览器右下角会出现一个红色的“叉”或者一个绿色的“勾”,分别表示页面无效和有效。如果在你的页面显示的是绿勾,那恭喜你,你的代码非常规范,如果有错也不用着急,双击红叉标志能够显示错误信息,根据提示逐个修改就行。

另外值得注意的是,HTML代码的有效性还是要以W3C官方的校验为准,小陆在使用此工具过程中发现它的校验规则跟W3C标准有些非常细微的差别,不过大部分时候还是一致,如果不放心,请使用W3C Markup Validation Service确认验证。

5. Simple Links Counter

在网站维护的时候,链接的有效性检测是一个让人头疼的工作,页面中繁多的链接着实让维护难度倍增,可能一次不严谨的批量查找替换让很多链 接出错,这个错误是老板和用户都无法容忍的,所有对于这个问题,尤其要倍加小心。SLC(Simple Links Counter)能够自动检测页面中的链接是否有效,你能够会说Dreamweaver里也有链接检查,没错,DW自带了链接检查功能,不过DW的检测仅 限于站内链接,对站外链接便无能为力。

除了检测链接有效性,SLC还能显示页面分别有多少站外链接,多少站内链接,以及具体的链接URL地址,对网站不良外链检查也是很方便的。

Simple Links Counter – Firefox插件安装

6. X-Ray

如果能在浏览器里看到页面内容是被那一些HTML标签所包含,是不是很直观呢,X-Ray就是这样一款工具。普通的一个网页在前端设计师 们眼中,不仅是单纯的文字图片,而是各种网页标签组成的结构图,但这些画面纯粹存在于设计师们的大脑中,X-Ray提供了一个让让它视觉化的方法,尤其是 在浏览别人的网站时尤其有用。

X-Ray – Firefox插件安装

安装以后,浏览器邮件菜单就多了一个“X-Ray”选项。这个工具的缺点是会让页面变得很乱,不过只要研究的页面对象不是太多,还是能够应付得过来。

7 . YSlow

有一个比Google Page Speed更强大网页性能优化工具,那就是YSlow,它是由Yahoo提供的页面性能评测和优化工具,YSlow也有页面性能评分,有趣的 是,YSlow评分接近的两个页面,Page Speed评分却相去甚远,在实际的页面优化时,YSlow的评分并不作为重要参考,因为YSlow提供了其他更多有用的信息。它能够统计一个网页中包含 的所有元素,包括图片文件、CSS文件、JS文件等,而且显示了页面的HTTP请求数,小陆认为这是页面性能优化最重要的指标之一,所以根据YSlow提 供的信息进行针对性的优化,能够产生非常明显的效果。

YSlow – Firefox插件安装

YSlow同样是一个Firebug平台的插件,需要在Firebug里运行。

8. Colorzilla

回忆一下我们是如何给网页配色的?首先打开图形软件(比如PS或者Fireworks等),导入页面效果图,使用软件中的拾色器取得图片 上某个位置的颜色,然后将颜色的RGB或者十六进制值复制到Dreamweaver中,如果没有效果图的时候,我们还要先截图,额,这样实在太浪费时间。

除了一些常用的颜色之外,很少有人能够在看到颜色时立刻准确的说得出它的颜色值,其实有一款火狐插件能够帮你“说出”颜色 值:Colorzilla能够取得浏览器中任何一点的颜色值,并且表示为RGB和十六进制值,可以非常方便的复制使用,在制作和修改页面时候大大提高工作 效率。

Colorzilla – Firefox插件安装

9. MeasureIt

除了取色以外,精确度量页面元素尺寸也是非常重要的操作,尤其是对像小陆这样页面设计“像素派”,并且很多时候在页面调试的时候,也需要 知道某些元素的尺寸以确定是否符合预留的空间。MeasureIt是一个很方便的页面测量工具,只需要拖动鼠标就能完成度量,是不是很直观?


转载于:https://my.oschina.net/moks/blog/424739

相关文章:

马斯克公开支持“上班摸鱼”:让工作更愉快!

整理 | 王晓曼出品 | 程序人生 (ID:coder _life)11月16日,在国美集团批评员工上班摸鱼的通报中,一名员工在网易云音乐上使用了22.5G的流量格外显眼。11月18日,网易云音乐也紧跟热点上线了摸鱼计算器活动&am…

瀚思首发三款产品 推动大数据安全战略布局

安全已成为了当下社会最为关注的几个问题之一,随着大数据时代的来临,如今的安全问题也变得严峻和复杂。近日,HanSight瀚思在北京召开了产品战略暨融资发布会,推出了瀚思用户行为分析系统(HanSight UBA)、瀚…

Linux环境编程--编辑器基本操作

vim使用 新建文件 #vim hello.c 插入模式 按下I键,底下出现- - 插入- - 换行:按下Enter 删除字符:普通模式下按x 删除整行:按dd 恢复删除:按u 取消命令: CtrlR 对U后果弥补 复制:y y2w复制2个…

2021 IDEA大会开启AI思想盛宴,用“创业精神”做科研

11月22日上午10时许,由深圳市福田区人民政府、深圳市福田区科技创新局和粤港澳大湾区数字经济研究院(International Digital Economy Academy, 简称“IDEA”)联合举办的2021 IDEA大会在深圳福田开幕。大会以“The World Needs a Few Good IDE…

Android不同分辨率和不同密度适配

官方原文地址:http://developer.android.com/training/multiscreen/screendensities.html 本文主要介绍: 1.dip dp sp 简单用法 2.适配不同分辨率屏幕图片的处理方法 支持不同的密度或分辨率 本课介绍如何通过提供不同的资源和使用的测量分辨率独立单元支…

网络工程师成长日记333-某城市政府项目

网络工程师成长日记333-某城市政府项目 这是我的第333篇原创文章,记录网络工程师行业的点点滴滴,结交IT行业有缘之人 直接上干货,拓扑图: 工程目的:排除故障配置如下:LinWei#show running-configBuilding c…

linux环境编程-- ftok()函数

系统建立IPC通讯(如消息队列、共享内存时)必须指定一个ID值。通常情况下,该id值通过ftok函数得到。 ftok原型如下: key_t ftok( char * fname, int id )fname就时你指定的文件名(该文件必须是存在而且可以访问的),id是…

使用 ChatterBot 库制作一个聊天机器人

作者 | 周萝卜来源 | 萝卜大杂烩我们学习一些如何使用 ChatterBot 库在 Python 中创建聊天机器人,该库实现了各种机器学习算法来生成响应对话,还是挺不错的1什么是聊天机器人聊天机器人也称为聊天机器人、机器人、人工代理等,基本上是由人工智…

powerDesign设计随笔

PowerDesigner的Table视图同时显示Code和Name的方法 实现方法:Tools-Display Preference powerDesigner设置 name不自动等于code 从数据库里抽取了数据模型,为了理清思路,需要将name改为中文名称,但是pd自动将name填充为code&…

Apache Kylin在绿城客户画像系统中的实践

前言\\作为国内知名的房地产开发商,绿城经过24年的发展,已为全国25万户、80万人营造了美丽家园,并将以“理想生活综合服务提供商”为目标,持续为客户营造高品质的房产品和生活服务。\\2017年,绿城理想生活集团成立&…

linux环境编程--IPC 之 msg queue

消息队列在UNIX的SystemV版本,AT&T引进了三种新形式的IPC功能(消息队列、信号量、以及共享内存)。但BSD版本的UNIX使用套接口作为主要的IPC形式。Linux系统同时支持这两个版本。系统调用msgget() 如果希望创建一个新的消息队列&#xff0…

2021 IDEA大会圆满落幕,一文回顾大会精彩看点

11月23日,为期两天的2021 IDEA大会在深圳福田圆满落幕。2021 IDEA大会由深圳市福田区人民政府、深圳市福田区科技创新局和粤港澳大湾区数字经济研究院(International Digital Economy Academy,简称“IDEA”)联合举办。深圳市科创委…

【转】Android下编译jni库的二种方法(含示例) -- 不错

原文网址:http://blog.sina.com.cn/s/blog_3e3fcadd01011384.html 总结如下:两种方法是:1)使用Android源码中的Make系统2)使用NDK(从NDK r5开始)---------------------------------源码要求&…

linux下如何修改系统时间

我们一般使用“date -s”命令来修改系统时间。比如将系统时间设定成2018年2月23日的命令如下。 #date -s 02/23/2018    将系统时间设定成下午11点12分0秒的命令如下。    #date -s 11:12:00    注意,这里说的是系统时间,是linux由操作系统维…

thttpd服务器

1 引言随着微处理器技术、计算机网络技术的进步,基于嵌入式WEB的网络数字视频监控系统逐渐得到了人们的广泛关注。把图像采集、视频压缩和WEB功能集中到一个体积很小的设备内,可以直接连入局域网和Internet,达到即插即用,省掉多种…

链接产业 聚变未来 | 移动云区块链开发者论坛来了

有人认为,如果说蒸汽机释放了人们的生产力,电力解决了人们基本的生活需求,互联网改变了信息传递的方式,那么区块链作为构造信任的机器,将可能改变整个人类社会价值传递的方式。区块链已走进大众视野,成为社…

Bzoj4016: [FJOI2014]最短路径树问题

题面 传送门 Sol 先\(SPFA\)求出单源最短路&#xff0c;\(Bfs\)建出树&#xff0c;字典序可以用堆解决 然后就是点分治的一眼题 开桶记录到当前根经过边长度相同的最长路&#xff0c;记录它的长度 自己强行\(yy\)了一个这种类型的点分丑陋写法 # include <bits/stdc.h> #…

libevent源码深度剖析

原文地址&#xff1a;http://blog.csdn.net/sparkliang/article/details/4957667libevent源码深度剖析一——序幕张亮1 前言 Libevent是一个轻量级的开源高性能网络库&#xff0c;使用者众多&#xff0c;研究者更甚&#xff0c;相关文章也不少。写这一系列文章的用意在于&#…

元宇宙中可跨语种交流!Meta 发布新语音模型,支持128种语言无障碍对话

编译 | 禾木木出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;语言交流是人类互动一种自然的方式&#xff0c;随着语音技术的发展&#xff0c;我们可以与设备以及未来的虚拟世界进行互动&#xff0c;由此虚拟体验将于我们的现实世界融为一体。然而&#xff0c;语音技…

前端面试官,我为什么讨厌你。

近两年来&#xff0c;参加过的前端面试不下二十场了&#xff0c;吐槽一下。我所经历的&#xff0c;都是小公司&#xff0c;大公司的同学请无视。 招聘信息能否不要装逼&#xff1f;写一大堆你项目根本用不上的&#xff0c;来给谁看&#xff1f;我曾遇到上面写了一堆对js如何要求…

【ASP.NET Core】解决“The required antiforgery cookie xxx is not present”的错误

当你在页面上用 form post 内容时&#xff0c;可能会遇到以下异常&#xff1a; The required antiforgery cookie "????????" is not present. 咱们来重现一下错误。新建一个 ASP.NET Core 项目&#xff0c;模板选【空】就行了&#xff0c;这是老周最喜欢的项…

linux系统级别的能够打开的文件句柄的数file-max命令

简单的说, max-file表示系统级别的能够打开的文件句柄的数量, 而ulimit -n控制进程级别能够打开的文件句柄的数量.man 5 proc, 找到file-max的解释&#xff1a;file-max中指定了系统范围内所有进程可打开的文件句柄的数量限制(系统级别, kernel-level). &#xff08;The value …

这封以数字构写的蓝图,正在实现笔尖所触即世界

作者 | 贾凯强出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;一撇一捺&#xff0c;一勾一抹&#xff0c;笔走龙蛇&#xff0c;可见真意。笔者小时候字迹潦草&#xff0c;便总是抱怨为什么一定要写字好看&#xff1f;而如今计算机统治了世界&#xff0c;键盘和鼠标早…

Svn 笔记—— Hooks

pre-commit 钩子功能&#xff1a;[rootDa hooks]# cat /application/svndata/sadoc/hooks/pre-commit#!/bin/bash#Check message lenth ---更新版本时强制输入信息小于5个字符会退出REPOS"$1"TXN"$2"logmsgsvnlook log -t $TXN $REPOS |grep &q…

22.CSS边框与背景【上】

第十七章 CSS边框与背景【上】 一、声明边框 属性 值 说明 CSS版本 1、border-width 长度值 设置边框的宽度&#xff08;可选&#xff09; 1 2、border-style 样式名称 设置边框的样式&#xff08;必选&…

一致性 hash 算法( consistent hashing )

原文地址&#xff1a;http://blog.csdn.net/sparkliang/article/details/5279393consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出&#xff0c;目前在 cache 系统中应用越来越广泛&#xff1b; 1 基本场景 比如你有 N 个 cache 服务…

【json的使用】

1、json格式字符串&#xff1a;Java代码/** 操作成功 200 */ public static final String RESULT_SUCCESS "{\"code\":\"200\",\"message\":\"成功!\"}";复制代码2、解析json字符串&#xff1a;Java代码JSONObject object…

通过 for 循环,比较 Python 与 Ruby 编程思想的差别

作者 | Doug Turnbull译者 | 豌豆花下猫Python猫来源 | Python猫Ruby 与 Python 之间的差异在很大程度上可通过for循环看出本质。Python 拥有for语句。对象告诉for如何进行协作&#xff0c;而for的循环体会处理对象返回的内容。Ruby 则相反。在 Ruby 中&#xff0c;for本身&…

Blippar放大招,要开源其AR和计算机视觉技术

AR公司Blippar将向第三方开发者提供AR和计算机视觉技术API&#xff0c;来推动他们的AR商业应用解决方案的发展。 致力于用AR技术帮助一些大品牌进行品牌故事和消费者营销的AR公司Blippar&#xff0c;最近对外宣布&#xff0c;要将他们的AR和计算机视觉技术API&#xff0c;提供…

Linux CPU数量判断命令

其实只要 #include <unistd.h>long num sysconf(_SC_NPROCESSORS_ONLN); 便可以获得当前CPU的数量。。。 判断依据&#xff1a;1.具有相同core id的cpu是同一个core的超线程。2.具有相同physical id的cpu是同一颗cpu封装的线程或者cores。 英文版&#xff1a;1.Physical…