分类目录归档:浏览器插件

浏览器插件

User-Agent Selector 一款模拟手机端测试网页的浏览器插件

摘要 : User-Agent Selector是一款可以改变chrome浏览器的User-Agent的谷歌浏览器插件,使用User-Agent Selector插件可以很方便地在电脑浏览器中模拟各种手机或其他移动设备的访问。

1

User-Agent Selector的开发背景

现在随着移动设备越来越流行,传统的网页开发的模式已经开始慢慢向移动设备的领域进军,但是由于移动设备的浏览器种类比传统PC机上的浏览器更加五花八门,用户就需要对每一个移动设备中浏览器进行大量的测试才能满足大部分用户的要求,而一般的开发人员可不会真的准备这么多的手机或者其他移动设备去一个一个地测试,还有一种比较简单的方便就是使用电脑中的浏览器来模拟移动设备中的浏览器。

因为一个网站用于识别电脑上的浏览器还是移动设备中的浏览器主要是看浏览器给当前网站发送的请求中的User-Agent信息,所以我们就可以利用这个规则改变浏览器中的User-Agent信息来模拟移动设备来请求网页,但是如果我们每次请求网页的时候都修改一次User-Agent信息那就太麻烦了,所以今天给大家介绍一款可以快递切换浏览器中的User-Agent信息的谷歌浏览器插件。

User-Agent Selector的简介

User-Agent Selector是一款可以快速切换当前chrome浏览器User-Agent信息到手机等移动设备的chrome插件,用户安装了User-Agent Selector插件以后,如果需要模拟移动设备对某个网页进行方便,就不再需要每次在开发者工具中修改请求的User-Agent信息,只需要点击谷歌浏览器右上角的User-Agent Selector插件按钮并在弹出的窗口中选择相应的设备User-Agent即可,如果User-Agent Selector插件已经提供的User-Agent不满足用户的需求或者和用户需要的User-Agent有些不一样,也可以使用User-Agent Selector插件的选项配置出个性化的User-Agent信息并保存到chrome浏览器中随时可以使用。

User-Agent Selector的使用方法

1.在谷歌浏览器中安装User-Agent Selector插件并在chrome的扩展管理器中启动自定义User-Agent信息的功能。User-Agent Selector的下载地址可以在本文的下方找到,安装离线chrome插件的方法可以参考本站的置顶文章。

2.打开任意一个网站,然后点击chrome右上角的User-Agent Selector插件按钮即可弹出一个User-Agent选择列表,用户在列表中选择一种自己想要的常见User-Agent即可改变chrome的请求信息,如图所示:

20141202234021_4101

3.默认情况下User-Agent Selector插件使用的是chrome浏览器中的User-Agent来访问网站,用户还可以选择模拟Firefox的浏览器来访问指定的网站,如图所示:

20141202234428_1757

4.如果要测试该网站在移动设备中的显示就可以改变User-Agent Selector插件的User-Agent选项来模拟手机等移动设备来请求网站,如图所示:

20141202234816_4101

5.如果用户需要自定义User-Agent的请求信息,可以右键点击chrome右上角的User-Agent Selector插件按钮来启动个性化选项配置界面,在该界面中用户可以新增、修改、删除User-Agent来配置自己需要的设备类型,如图所示:

20141202234950_3476

User-Agent Selector的注意事项

1.User-Agent Selector只能改变浏览器中请求头部中的User-Agent信息,对其他的信息无法进行更改,如果需要更加多的内容修改可以使用谷歌浏览器的开发者工具。

2.User-Agent Selector虽然能够模拟移动设备来请求网站,但是无法改变电脑中浏览器的分辨率来达到更加逼真的效果。

显示网站IP以及国家的谷歌浏览器插件

很多时候出于对网站的真实情况需要,我们需要对网站的情况做些了解,通过这款插件,我们可以了解到该网站的IP地址(这个一般ping也是可以做到)以及主机服务器所在的国籍(强调一点就是也有可能是在国内运营,主机放在国外的网站)。

 

我们在使用Chrome浏览一个网站的时候,默认在浏览器中显示的是该网站的域名,对于网站域名来说,其实它是指向了一个真实的IP地址,这个IP地址代表着网页服务器的所在地,通过使用一些工具,我们就可以知道该网站的服务商所在国家或地区,进而更加清楚地了解到网站的真实情况,避免我们在不知情的情况下,受到钓鱼网站的攻击。

20150124001811_3759 20150124002230_0185

显示IP或域名的国家国旗是一款可以实时显示当前正在浏览的网站服务器所在国家的国旗的谷歌浏览器插件,通过在Chrome中安装显示IP或域名的国家国旗插件,用户可以在浏览相应网站的时候,在Chrome地址栏的右侧显示出当前网站所在的国家或地区,并通过国家国旗这样小图标的形式,让用户快速地分辨出来。

当用户受到了钓鱼网站攻击的时候,就可以很容易地通过显示IP或域名的国家国旗插件来查看到该网站是否正常(比如这家网站应该是国内的网站经营的,显示IP或域名的国家国旗插件却显示出该网站是美国的国旗,这时候就应该仔细查看该网站是否是真实的网站地址)。这句话的解释可以这样理解。一般如果你常识性的判断这个网站是属于国内的,而IP却是国外的。不过这个一般是指你不太清楚的小网站。而像百度以及腾讯,新浪有众多海外服务器。所以这些大品牌就比较例外

 

显示IP或域名的国家国旗的注意事项

1.为了保护用户的隐私,显示IP或域名的国家国旗插件表示,其只会发送用户当前的域名到插件的服务器,并不会抓取用户的隐私信息。

2.对于显示IP或域名的国家国旗插件显示的国家国旗情况,有时候并不一定准确,因为一个网站也许服务器在国外,但是还是有可能在国内运营,不过这对于国内的一些大型网站来说可能性不大,用户仍然可以通过这个来判断网站的真实情况。

3.如果想要保护网站免受钓鱼网站的骚扰,在这里推荐用户安装另外一款可以网站安全的谷歌浏览器插件:Avast Online Security。

 

插件下载地址

http://chromecj.com/accessibility/2015-01/350/download.html

【转载】最受Web开发者喜欢的10款必备的浏览器插件

目前Firefox、Chrome、以及其它一些主流的Web浏览器提供了成千上万的炫酷插件,只有少部分是为专业的Web开发人员和设计者精心准备的。对于日常设计和开发网站而言,哪些插件是最有价值的呢?下面我精选了最佳10款浏览器插件,希望对大家有所帮助。我自己也亲测几款,确实是很好用的几款代码调试工具

3d illustration of text 'web' with wrench and nuts
3d illustration of text ‘web’ with wrench and nuts

1、Firebug

da86eee5bc8f854b

支持浏览器的类型: Firefox

费用:免费

获取方式:安装 Firebug for Firefox 或者 Firebug Lite for other browsers

功能:支持在浏览器内检测、编辑、调试网站代码。

推荐理由:Firebug是最好的插件。这款相信大家都不会陌生,很多网站前端开发都会了解,很多时候我们要调试代码,除了谷歌的右键审查元素,和Firefox的查看元素之外,这款值得推荐

Firebug不仅让开发者可以检查网站的代码,还支持调试。如果您在使用JavaScript编写一段程序,更改每一行中的背景色,那么Firebug会实时显示CSS代码中任何变化。

Firebug是不可缺少的,它通过在窗口中显示HTML和CSS代码来实现代码的检测。你可以随时随地选择是否更改、或者新增样式。无需保存、重载文件,你就可以在页面上实现同步变化。

Firebug有一个非常强大的功能,能够真正排查出JavaScript的错误。当你点击Ajax链接,页面会以HTTP的格式反馈信息,你可以看到头文件,实时同步了解发生的一切。

2、Web Developer

十款Web浏览器插件强力推荐

支持浏览器的类型:Chrome, Firefox

费用: 免费

获取方式: 安装 Web Developer for Chrome 或者Web Developer for Firefox

功能:提供浏览、编辑、以及调试网站的工具包。

推荐理由:我喜欢Web Developer,因为它能让我充分控制任何一个网站。它能让我按照我想要的方式来随时调整和更改网站。Web Developer 中包含的Outline Block Level Elements特别强大,它能让我直观看到前端部署网站的过程。

通过Web Developer,我可以用查看CSS,它能够展现出网页上所有的样式列表,我可以及时编辑,在浏览器中查看代码的效果,对于内容管理系统特别有用,它允许我调整即将在浏览器端显示的样式。

Web Developer与Firebug有些相似,但是我觉得Firebug使用起来更为繁琐,尤其是将Firebug中的样式表导入到Joomla中,对于有些人来讲,Web Developer 更适合。

3、Google Chrome Developer Tools

十款Web浏览器插件强力推荐

支持的浏览器类型: Chrome

费用: 免费

获取方式:在Chrome浏览器中右键任何一个Web网页,选择”Inspect Element,” 然后从菜单中选择View –> Developer –> Developer Tools

功能:提供了检查、编辑和调试代码的工具

推荐理由:Google 推出的Developer Tools是对决Firefox的Firebug的最好工具,但谷歌并没有提供下载的插件,它把这个工具直接嵌入到了Chrome 浏览器中。

Developer Tools拥有最直观的设计,左边是HTML、右边是CSS,是我最喜欢的插件。它可以检查元素,鼠标经过的时候支持高亮显示,它能够让我实时看到在线网站的变化,包括一些只存在于我本地电脑的变化,它可以提供一个完美的测试环境。这个工具操作非常简单,能够提高用户的效率。

Developer Tools允许您查看屏幕后方渲染的最终输出数据,还可以高亮显示自定义的元素,查看CSS tag等,标记代码的变化,无需更改文件,即可在浏览器中实时查看效果。

Chrome的Developer Tools好处之一在于它可以显示元素的尺寸,点击图片的URL,可以弹出相关链接的图片,显示图片的尺寸以及文件类型,这是Firebug所无法实现的功能。Developer Tools只要扫描一下,就可以知道物体的尺寸,这可以大大节省时间。

4、JavaScript Deminifier

十款Web浏览器插件强力推荐

 

支持浏览器类型: Firefox

费用: 免费

获取方式:安装 JavaScript Deminifier for Firefox

功能:方便查看压缩后的内容

推荐理由:通常情况下,我们无法查看压缩脚本中的错误,而这款工具可以实现,虽然无法编辑,但是JavaScript Deminifier可以让你查看到脚本的可读版本。同时,它可以装饰页面的效果,这些工具方便你查看CSS代码,选择合适的颜色、字体、尺寸等。

5、Font Finder

十款Web浏览器插件强力推荐

支持的浏览器类型:Chrome、Firefox、Safari 5

价格:免费

获取方式:可以在developer’s site下载安装

推荐理由:可以查看Web网页上选定文字的CSS信息。

这款便捷的插件可以显示Web页面上任何文字元素的字体、颜色等信息,它允许你修改、或者复制、将这些元素的属性应用到另一个网页中。Font Finder可以让你轻松查看字体的修改信息。

6、MeasureIt

十款Web浏览器插件强力推荐

支持浏览器的类型: Chrome, Firefox, Safari

费用:免费

获取方式:可以在developer’s site下载安装

推荐理由:使用像素标尺可以检查到屏幕上任何一个物体的宽度、高度、位置。

为什么图片不能自适应调整尺寸来适应页面的布局呢?MeasureIt可以帮你调整图片的大小,将原来205 x 100的图片调整为200 x 100的像素大小。

更新CSS最简单的方式是要明确宽度和高度,MeasureIt可以帮助你快速掌握屏幕上物体的宽度和高度。以前通过Dreamweaver才能实现的功能,现在通过MeasureIt ,就可以测量出Web网页上元素的尺寸了。

7、ColorZilla

十款Web浏览器插件强力推荐

支持浏览器的类型: Chrome, Firefox

费用:免费

获取方式:安装ColorZilla for Chrome 或者ColorZilla for Firefox

推荐理由:识别网站颜色和色彩调色板,你可以任意调整颜色,并在其它地方复制和粘贴色彩。

这种工具提供了最简单的方法来匹配颜色,你可以使用滴管来选择合适的颜色。这款工具会根据Web页面生成基于页面的调色板,它可以为你创建一个调色板。

8、Flashblock

十款Web浏览器插件强力推荐

支持浏览器类型: Firefox;

费用:免费

获取方式: 安装 Flashblock for Firefox 或者 FlashBlock for Chrome

功能:Web开发者可以使用Flashblock来查看不支持Flash的页面,点击可以查看大图。

推荐理由: 阻止Web网页上的Adobe Flash 组件访问浏览器,使用图标来代替组件,查看Flash动画效果时,用户需要优先点击图标。

对于那些无法查看Flash元素的用户,他们通过借助这款插件,就可以确保网站是够运行正常。

是否想要提高这款网站的加载速度?这个工具可以提供慢镜头,帮你找出异常,指出哪些地方有可能值得进一步的优化。

9、Yslow

十款Web浏览器插件强力推荐

支持的浏览器类型:Firefox, Chrome, Safari, Opera;

费用:免费

获取方式:Yslow 网站上下载

功能:鉴定网站性能上出现的问题,并推荐相关解决方案。

推荐理由:Yslow 在多个目录里会升级Web页面的性能,提高整体网页的分数,还会在网站如何优化的方面给出一些专业建议,点击查看大图。Yahoo的Yslow能够优化Web网页的性能,提供一些加速网站的建议。

该工具会根据你做出的各种请求来给出相应的提示,比如你的图片如果没有经过优化,它会告诉你怎么来提高客户的下载量。

10、Page Speed

十款Web浏览器插件强力推荐

支持的浏览器类型: Chrome, Firefox;

费用:免费

获取方式: 安装Page Speed for Chrome 或者 Page Speed for Firefox

功能:在Web网页上运行性能测试,在网页上提供最好的实践来优化资源。

推荐理由:Page Speed会为每个网页评分,提供一些如何提高网页性能的建议,开源项目也新增了一项免费的Page Speed Service,可以自动重写并优化网页。

        总结

目前,浏览器市场中的主流浏览器IE、Firefox、Chrome、Safari甚至是Opera都已经先后添加了插件功能,正所谓工欲善其事必先利其器,以上精选的十款插件能够使浏览器的功能变得更加强大,外表变得更加个性化,大家不妨体验下!

 

本文转自:【IT168 技术】原文: http://tech.it168.com/a2012/0319/1326/000001326803_all.shtml

作者: 皮丽华

参考英文:http://www.computerworld.com/s/article/9225073/Essential_browser_tools_for_Web_developers

【原创】如何查看竞争对手的网站流量来源和排名

做为站长,经常要免不了通过分析竞争对手网站的流量和排名,优势和劣势,以及哪些可以采取的方法提升自己网站的流量。很多人会推荐Alexa或者站长之家等网站分析工具,不过往往要打开网页,然后输入框点击查询,那么我们能不能省下这个步骤呢?答案是可以的

作为对谷歌浏览器插件的爱好者,同时借鉴Chorme 插件网站: http://chromecj.com/和朋友的推荐,下面介绍一款插件可以实时查看网站的综合情况

SimilarWeb – 查询网站流量来源和排名利器

SimilarWeb是一款可以查看目标网站真实的网站参与、流量来源和网站排名信息等综合情况的谷歌浏览器插件。

SimilarWeb

SimilarWeb1

 

SimilarWeb的使用方法

1.在谷歌浏览器中安装SimilarWeb插件,并在Chrome的扩展器中启动网站流量来源和排名的功能,SimilarWeb插件的下载地址可以在本文的下方找到,离线SimilarWeb插件的安装方法可参考:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件? (其实也就是下载一个.CRX扩展名的文件直接拖动到谷歌浏览器即可

最新谷歌浏览器离线安装版可以从这里下载:http://chromecj.com/chrome/2014-09/177.html。

2.在安装了SimilarWeb插件以后,打开一个网址就可以使用SimilarWeb插件查看该网站的流量来源与网站排名等详细统计,如图所示:

安装后如图所示

 

1

 

网站流量综合情况

QQ截图20170207143259

 

网站入口出口链接情况,这个也就是说你的网站有哪些网站链接进来到你的网站上(左边)和你的网站链接出去到其他网站的情况(右边)

2

 

访问来源国家(以百度 baidu.com为例)

流量来源国家

流量来源情况

流量来源

 

你也可以自己选择用何种的搜索引擎管理对搜索关键词

3

4

SimilarWeb的简介

SimilarWeb是一款可以帮助用户查看网站的综合情况、流量来源和网站排名的谷歌浏览器插件,在chrome中安装了SimilarWeb插件以后,用户在点击一下SimilarWeb插件后就可以获得深入的流量参与和统计数据,使用SimilarWeb插件可以一键访问网站的9个指标,其中包括:

1.每月访问量和流量来源(直接、推荐、关键词搜索、社交网络、邮件、广告)。

2.每月访问量(6个月前)。

3.网站排名(国家、行业和全球)。

4.最主要使用国家。

5.最热门的10个进站前链结点/目的地网站。

6.最热门的10个付费和有机搜索关键词。

7.社交网络来源。

8.相关的移动应用。

9.类似网站。

SimilarWeb插件可以隐秘地运行在用户的chrome浏览器中,并通过用户访问的网站的受欢迎程度来来展示不同的颜色,让普通用户也能了解网站的运营情况。

 

使用SimilarWeb插件可以方便地查看出网站的多个指标,其中包括访问量、网站排名、网站来源、社交来源、类似网站,如图所示:

5

 

SimilarWeb的注意事项

1.SimilarWeb是一款可以帮助用户查询到任意一个网站的流量来源和网站排名的插件。

2.SimilarWeb是一款完全免费的插件。

SimilarWeb的联系方式

1.由 www.similarweb.com 提供

一款能够破解网站禁止复制的浏览器插件 — Enable Copy

有时候我们在网站上或者某些浏览页面上看到很喜欢的文章,但是网站禁止你复制,你使劲右键也点不开那个复制黏贴按钮,也许你只能黯然神伤。

那么今天我就介绍一款能够破解网站禁止复制的谷歌浏览器插件——Enable Copy,这款插件可以在绝大多数的网站上面复制你想要的内容,轻轻松松得到你要的文章

    Enable Copy的简介

Enable Copy是一款可以破解掉网站无法复制问题的谷歌浏览器插件,在Chrome中安装了Enable Copy插件以后可以让那些不懂网页javascript脚本的用户也能够轻松破解掉某些网站禁止复制网页内容的脚本程序。

对于那些能够通过破解脚本的方式破解掉网站复制功能的用户来说,Enable Copy插件也会大大提高了破解网站禁止复制功能的速度,因为用户只需要点击浏览器右上角的Enable Copy插件即可,没错,这就是一款一键破解网站防复制功能的Chrome插件。

 

    Enable Copy 怎么用

首先方法如下 (针对普通用户而言)

打开谷歌浏览器,访问谷歌Chrome 网上应用店 :https://chrome.google.com/webstore/category/extensions

Chrome-extensions

在左侧的搜索框内输入:Enable Copy 

Enable Copy

点击添加至Chrome(因为我这个是已经安装好的)

add-chrome-extensions

然后安装完后,浏览器右上角会有一个打勾的符号

1

一般默认是浅灰色的状态就表示未开启

 

点一下按钮深灰色表示开启

2

然后就可以复制你需要复制的地方了(一般这种工具常用的环境是那些受保护禁止复制的网站),当然绝大多数是可以有效的复制下来

 

当然对有网站程序开发经验的人员来讲,如果遇到这种情况也好解决:因为阻止在网页上复制文字的功能一般都是使用javascript脚本来编写的,用户只需要在浏览器中禁用掉javascript的执行就可以了

具体方法就是先F12 然后再 F1 开启谷歌浏览器调试窗口 Disable Javascript(关闭Javascript)然后再刷新一下就可以了(F5,或者Ctrl+F5),其实也蛮简单的。也不用有经验 哈哈

3

 

 

    结语

Enable Copy插件破解网站上一些功能的同时可能会违反网站上的一些使用协议,请用户在必要的时候尊重网站的版权和使用协议。

    在此申明,我本人也是很注重版权以及别人的著作权,很多时候复制一些材料和文章只为学习和交流用途,我在很多转载的文章中都有注明别人的出处,所以当然我也是建议大家尽量用在学术交流上,即使用在商业用途上,也需经过著作人的同意方能转载和引用。

如何查看网站架构和框架的工具——2017开年第一篇

首先祝大家元旦快乐了!

 

如果是代码大神,或者是网络高手可以直接跳过不看了,因为这个你们可能会懂一点。这边还是写给包括我自己一样的小白

 

下面两个是关于如何查看网站架构和框架的工具,比如你想看某一个网站是用什么编程语言写的,用的是什么web服务器,CMS是用什么平台,以及用了哪些扩展和脚本语言都可以看的到。

 

 

网站网址

Netcraft

http://toolbar.netcraft.com/site_report

Netcraft的工具界面如图所示

使用方法:

在Enter a URL here 那个长条的框中输入你要看的网站网址

netcraft

netcraft-com

Netcraft是一款很强大的工具,除了这个功能,还有其他的各种数据分析,包括其他功能很多我没有去测试过,欢迎大家给予意见和建议。方便补充!

谷歌插件 (可能要翻墙哦或者挂VPN)

Wappalyzer

wappalyzer

安装完插件会显示在这个地方,然后你就可以看到你当前网站的一些基本信息,比如用的PHP语言什么版本,以及网页当中嵌入的哪些统计工具信息,以及用什么脚本语言做的UI设计

1

 

PageXray

pagexray