扩展应用,创建网页
分类:微服架构

这里的创建网页是指利用 Popfly 在线创建网页,登录 www.popfly.ms 后可以利用微软的在线创作工具创建网页。

欢迎移步我的博客阅读:《对于 Web 设计师和开发者非常有用的 25 个 Chrome 扩展应用》

越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率。尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录后的Chrome的,非常方便啊。

该工具有两个标签。

尽管 Chrome 的开发者工具给你足够多的实用工具来覆盖你的设计和开发需求,但也可以通过添加免费的扩展应用去进一步扩展浏览器的功能。根据你的需要,并选择完美的扩展,你可以轻松地创建一个个性化的开发环境,这会大大提高你的开发效率。

Postman - REST Client

图片 1

要介绍的 25 个 Chrome 扩展应该我们为你选择分为以下几类:前端扩展,在线编辑,验证器与性能相关,测量扩展应用,颜色工具,字体测试工具和 很有用的实用性扩展应用。

Postman是Ajax开发的神器,对于Restful开发方式特别有帮助,可以用来模拟各种请求来测试API的正确性,比如用来模拟Ajax请求。它还支持认证,比如简单的用户名/密码,或者Oauth1.0。Rest Console也是一个不错的选择。

Page Editor 标签提供字体编辑、段落编辑、插入、布局选择等。

前端扩展

Edit This Cookie

图片 2

SnappySnippet

SnappySnippet 把 CSS 和 HTML 从 DOM 树里提取出来,然后发送到 CodePen,jsFiddle 或 JS Bin 上。

这是一个强大的cookie管理器。你可以添加、删除、编辑、搜索、保护和阻止cookies。Cookies也是一个非常强大的Cookie工具。

Page Style 可设置网页的页眉和页脚,主题、样式、颜色主题、站点字体、页面设置。

MagiCSS

MagiCSS 一个拥有内置编辑器的在线 CSS 编辑扩展应用,具有美化和减小 CSS 的功能。同时还允许创建 Github Gist。

Web Developer

图片 3

CSS Dig

CSS Dig 能够在大多数的网站上找到和组织样式表和样式块,给你一个简单的方法来分析和计划重构的代码。

安装Web Developer扩展后,会在浏览器的工具栏中添加一个按钮,点击该按钮,会弹出各种Web开发工具。此扩展工具的作者同时也是非常流行的Firefox扩展Web Developer extension for Firefox的作者。。

该在线创作工具可以快速轻松地创建简单的网页。

CSSViewer

CSSViewer 能集成很多工具和扩展程序去执行一个简单的任务。这使得它们更好地发挥功能。但没有 Chrome 扩展应用集合能在不集成的情况下可以完成这种功能。用法很简单,你只需点击工具栏的图标,然后将鼠标移到你想审查的元素上就可以了。

JSON Lint

CSS-Shack

CSS-Shack 帮助你创建图层样式(就像你用如 PS 一样),并能生成一个 CSS 文件。

一个在线验证和格式化JSON文件的应用。

CSS3 Generator

CSS3 Generator 如名,可以帮助你生成 CSS3 代码。

网页截图

CSS Shapes Editor

CSS Shapes Editor 在线编辑 CSS 形状的值。

截取网页为图片,支持窗口截图,区域截图和整个网页截图三种方式。支持水平和垂直翻页截取超大网页,新版引进自动截图保存功能。截图后,可以利用图片编辑工具编辑图片,然后将编辑后的图片保存为PNG格式的图片文件,并且提供了高亮工具,涂改工具和文字添加工具。

在线编辑

YSlow

WordPress Style Editor

WordPress Style Editor 支持在线审查和编辑你的 WordPress 的样式。

YSlow可以分析网页,并为改善网页性能提出修改建议,这些功能基于高性能网页的规则集。YSlow可以根据预定义的三个规则集或用户自定义规则集来对网页进行分级。,PageSpeed Insights是谷歌开发的类似功能的插件。

PageEdit

PageEdit 能把 Chrome 变成所见即所得的编辑器,你可以用它编辑任何网页。

ColorZilla

验证器与性能相关

可以从页面上任何一点获取颜色,维护获取历史等。

Perfmap

Perfmap 它用 Resource Timing API 来创建一个网站的前端的性能的热图检查的定时器,使得可以在浏览器中查看加载的资源。

Measure It!

Validity

Validity 帮助你验证任何一个网页。可以在 console 页查看错误的数量和详情。

MeasureIt! 给你测量一个网站中的任何元素的尺寸。Page Ruler也是一个不错的选择。

Web Developer Checklist

Web Developer Checklist 必备的扩展应用,可以查看任何一个网页的报错和反常的问题。

JavaScript Errors Notifier

Bootlint This Page

Bootlint This Page 在 Chrome 浏览器上显示一个按钮,帮助你查看任何一个基于 BootStrap 的网页的报错。可以在 console 页查看。

安装该扩展后,会在Chrome地址栏中以图标形式提示JavaScript错误,因为Chrome默认只有打开console才会显示错误。

Check My Links

Check My Links 扫描网页,并把链接以高亮显示,有效为绿色,无效为红色。没人会喜欢无效的链接!

Window Resizer

测量扩展应用

此扩展可以调整浏览器窗口的大小,以适应各种屏幕分辨率。这对于Web设计师和开发者非常有用,可以帮助他们在不同的屏幕分辨率下测试网站布局。

Page Ruler

Page Ruler 能够在任何网上形成一个画尺,并显示元素的 width,height 和 position。

Firebug Lite

Dimensions

Dimensions 简单且使用的工具,为你测量屏幕宽度和高度。

Firebug的精简版允许您检查的HTML,CSS和JavaScript代码,生活在任何页面。 你也可以编辑代码,立即测试新的变化。 这是一个开发者最喜欢的Firefox扩展Firebug的精简版。

颜色工具

JQuery 扩展

ColorZilla

ColorZilla 起源于 Firefox,但它为 Chrome 增加了多种颜色工具,像吸管,颜色选择器,调色板查看器和梯度生成器。

jQuery扩展让你在当前网页中运行JavaScript和jQuery命令。

Color Tab

Color Tab 在你每次打开一个新标签时,会给你一个美丽的新配色方案。

Pretty Beautiful Javascript

字体测试工具

该扩展可以使Javascript文件更容易阅读。其整合了Beautifier和Prettify的功能,可以为代码添加语法高亮。用法是在新窗口里输入js文件的URL或者在查看HMTL源代码时点击js文件的链接。如果是在Chrome的控制台里的资源选项里查看代码则推荐使用Chrome自带的"pretty print"功能,也就是点击"{ }"图标。

Fontface Ninja

Fontface Ninja 可以识别任何网页的字体,同时给出它的 size 和 line-spacing。帮助你测试和探索新的字体。

WhatFont

Font Playground

Font Playground 在任何网页上预览 Google 成千上万的字体。

用于查看当前页面使用了哪些字体,Firebug和Webkit Inspector也可以查看字体,但是远没有WebFont方便,WebFont可以通过把鼠标悬停在元素上来查看字体。同时还支持查看网络字体,如Typekit和Google Font API。

TypeWonder

TypeWonder 允许你在任何网站测试 web 字体。输入站点 URL 就可以立马预览字体。

IE Tab

很有用的实用性扩展应用

在Chrome中打开IE浏览器标签页,你可以打开一个标签来运行Internet Explorer,让你看到的网页在IE浏览器看起来如何。

Responsive Web Design Tester

Responsive Web Design Tester 是一个简单的工具,来帮助快速、轻松地测试网站在大多数流行的移动设备上的响应。

感谢阅读

45to75

45to75 为保证在所有大小设备上,你的文字是可读的。它可以帮你把句子规定在 45 到 75 个字符之间,从而优化句子长度。

喜欢看小编文章的点个订阅或者喜欢!小编每天都会跟大家分享文章,也会给大家提供web前端学习资料。

PerfectPixel

PerfectPixel 在开发 HTML 时,它会把半透明图像叠加在顶部,允许你在每个像素间进行比较。

ZenHub

ZenHub 为 Github 项目管理应用。有节省时间的特性,如 drap-drop 任务板和 to-do 列表,帮助你提升 Github 的生产效率。

Instant Wireframe

Instant Wireframe 谁不喜欢漂亮的线框呢?它给为任何一个网页添加线框,同时本地的也可以。

Minimalist Markdown Editor

Minimalist Markdown Editor 同步预览 Markdown。可以快速地帮 Markdown 转化成 HTML。

fb-flo

fb-flo 由 Facebook 开发,同时也是 Chrome 的扩展应用。使你能够在线编辑 JS,CSS,images 或任何静态资源。

Web Developer

Web Developer 如果你现在还没用这个应用,赶紧吧。这是迄今为止最受欢迎的 Chrome 和 Firefox 开发人员扩展应用。它添加了一个超级有用工具到浏览器,每个网页设计师和开发人员,还有你可能甚至不知道你需要的都会需要。

MySQL Admin

MySQL Admin 为你更好地,更简单地管理 MySQL 数据库。

完毕!

想要获取更多的 Chrome 扩展应用,请看 DevTools Tips,这里收集了 Chrome 的开发工具集和基本使用方法。如果你是一个设计师或开发人员,想获取更新最新的设计和开发资讯,请访问 Chrome 的扩展应用 Muzli 或 Panda。

如果你正在寻找 Firefox 的扩展应用,请看:对于 Web 开发非常有用的 20 个 Firefox 扩展应用。

之前还有一篇发布在 Speckyboy Design Magazine 上的文章是对于 Web 设计师和开发者非常有用的 20 个 Chrome 扩展应用。

  • 原文链接

本文由10bet手机官网发布于微服架构,转载请注明出处:扩展应用,创建网页

上一篇:DML语句及用户授权,除非指定了 下一篇:没有了
猜你喜欢
热门排行
精彩图文