当前位置： Chrome插件首页 > 开发者插件 > Code Cola - CSS样式可视化插件 Chrome插件

Code Cola - CSS样式可视化插件 Chrome插件

插件分类：开发者插件
直达下载

Code Cola - CSS样式可视化插件 Chrome插件图文教程

Code Cola插件概述

Code Cola是一款能查看网页代码样式的chrome CSS样式可视化插件，主要能查看页面板块中的所有样式元素，并能通过配置到服务器上的文件进行在线编辑。相信大家都知道，网页设计出来以后，其样式都是不能在浏览器上修改的，只有设计网页的作者才能修改，但是有了这款Code Cola插件，用户就可以直接在浏览器上修改你打开的网页，该插件并不是直接修改原版网页，只是利用遮罩在浏览器上添加一个虚幻的效果，一旦您使用其他浏览器打开相同的网页，特效就不存在了，就像是为网页添加一个新的图层一样！在安装了这款插件后，使用者可以在页面中点击页面模块来查看相应的样式信息，同时还能通过插件查看网页的样式代码以及整体代码。
Code Cola插件概述

Code Cola插件功能

1、code cola是一款可以改变你浏览器网页效果的工具，支持二十多种设置
2、可以获取改变网页的连接地址，将一个HTML文件修改文字、修改颜色、修改背景
3、可以搜索网页，如果您有指定的HTML文件，就输入地址，这样就能修改了
4、在修改当前的网页，您启动浏览器后，随机打开一个网页，然后利用code cola修改
5、可以查看实时效果，修改以后，点击保存，鼠标点击页面即可查看

Code Cola插件特色

1、code cola是中文的设置界面，虽然有的功能是英文的，但是影响不大
2、通过Code Cola插件，可以轻松修改HTML文字效果，图片效果、边框效果
3、让您在同一个浏览器上查看两种不一样的网页
4、可以随时关闭效果，点击“关闭”功能，就不会出现你修改的网页特效
5、Code Cola插件是免费的，可以下载添加到360浏览器、谷歌浏览器、火狐浏览器

Code Cola插件下载安装

1.你可以从chrome应用商店里找到Code Cola插件，如果你的chrome应用商店无法打开，你可以在本站的下方找到Code Cola插件下载地址。
2.离线安装的方法参照一下方法：老版本chrome浏览器，首先在标签页输入【chrome://extensions/】进入chrome扩展程序，解压你在本站下载的插件，并拖入扩展程序页面，它会提示你是否安装该插件。
Code Cola插件下载安装
3.最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照：Chrome插件安装时出现"CRX-HEADER-INVALID"解决方法，安装好后即可使用。
Code Cola插件下载安装

Code Cola插件使用方法

1.插件安装完成后会出现在浏览器右上方的插件栏中并提示你以安装完成。
Code Cola插件使用方法
2.进入任意网页，点击该扩展后图标会由绿色多变为绿色少，还会弹出一个窗口，该窗口可以查看HTML与CSS的样式代码。
Code Cola插件使用方法
3.将鼠标移动至网页的任意板块即可发现板块区域会变成蓝色，点击即可在上述窗口中显示其所具有的样式信息。
Code Cola插件使用方法
4.点击上图黑色窗口即可对网页进行编辑，可以选择字号、行高、字色、字形、对齐方式、文字描边等等，只要点击一下功能，这里会显示下拉的菜单，自己填写即可。
Code Cola插件使用方法
5.通过这款插件，使用者还可以查看并修改网页的整体代码。
6.当然，要修改代码需要在服务器中上传并配置Code Cola插件的PHP文件。
Code Cola插件使用方法

Code Cola插件更新日志

3.5.0（2013-05-01）
1.新用户界面
2.删除便签功能
3.优化眼功能
4.添加“ text-align：justify”支持
3.4.3（2012-05-27）
1.任意程度的线性梯度支持
2.当alpha为1时，返回rgb颜色替换rgba
3.将“ -webkit-linear-gradient”替换为“ -webkit-gradient（'linear'，...”
3.4.2（2012-05-25）
1.修理一些私人财产
2.更新小横幅
3.4.1（2012-04-04）
1.修复线性渐变错误
3.4.0（2012-03-27）
1.支持“背景”属性
2.增加兼容性说明
3.3.0（2011-11-03）
1.支持将代码发布到CodeColaPatterns.com
2.错误修复
3.2.1（2011-08-31）
1.修复添加笔记错误
3.2.0更新（2011-08-30）
1.支持“ -webkit-text-stroke”
2.按“ f”，可以通过css选择器找到要输入的元素
3.在显示当前元素时设置不透明度（将鼠标放在面板上的“？”上）
4.优化弹出窗口淡入的动画
5.修复渐变错误
3.1.0更新（2011-08-0？）
1.支持“转换” 2d
2.添加很多字体家族
3.0.1更新（2011-08-02）
1.修复检查元素功能
2.修改描述
3.0.0更新（2011-07-24）
1. Codecola现在由YUI3提供支持，它变得更加稳定和强大
2.所有数字输入均支持html5数字输入
3. codecola可以完美地在非Chrome扩展环境中运行，例如safari。 （浏览器必须支持html5格式）
4. code-cola-widget已与codecola分离，这是github（https://github.com/zhouqicf/code-cola-widget）上的源代码
2.4.0更新（2011-06-04）
1.支持-webkit-box-reflect
2.支持-webkit-mask-image
3.在每种颜色输入上添加透明背景图像
4.优化代码
2.3.0更新（2011-04-21）
1.使用获取链接功能时，将相对URL更改为绝对URL
2.支持rgba
3. -ms-linear-gradient
4.不透明度控制
5.修复线性渐变错误
2.2.0更新（2011-04-04）
1.支持“ -moz-linear-gradient”和“ -o-linear-gradient”
2.修复：在Mac上选择多元素宽度“命令”
3.修复：将面板拖出屏幕
4.修复：无法阻止开发人员创建的事件
2.1.2更新（2011-02-09）
1.将默认本地设置更改为“ en”
2.1.0更新（2011-02-05）
1.添加CSS3线性渐变
2.添加了将修改后的页面发送到服务器的功能，并向用户返回链接
3.优化代码
2.0.0更新（2011-01-15）
1.扩展名将“ Visual Firebug”更改为“ Code Cola”
2.添加注释功能（修复2.0.1中的““替换” <br>“错误）
3.添加一次性增加，修改和删除多个css属性的功能
4.添加对“ -moz”等css3私有属性的支持。
5.版本表示将“ x.xx”更改为“ x.x.x”
6.提醒用户离开时保存结果
1.15更新（2011-01-09）
1.修复了文本阴影和框阴影的角度控制与Photoshop相反的问题
2.修复了选择元素后无法初始化文本阴影和框阴影的控件的问题
3.在框阴影中添加“ spread”参数
4.调整了一些范围控件的最大属性
1.14更新（2010-12-31）
i18n支持，包括“ en”和“ zh_CN”。
1.13更新（2010-12-30）
更改徽标。
1.12更新（2010-12-27）
1.添加一个功能以关闭扩展名。
2.在扩展名不能初始化时更改Resion，例如：
2.1。本地页面“文件：\”
2.2。 chrome.google.com
2.3。铬：//
1.1更新（2010-12-17）
1.自由选择宽度ctrl。
2.显示当前节点。
3.添加“关于”信息。
4.修复了拖动面板时样式正在计算的错误。
5.纠正样式污染。

Code Cola - CSS样式可视化插件 Chrome插件图片

  • Code Cola - CSS样式可视化插件插件图片
  • Code Cola - CSS样式可视化插件插件图片
  • Code Cola - CSS样式可视化插件插件图片
  • Code Cola - CSS样式可视化插件插件图片
  • Code Cola - CSS样式可视化插件插件图片
  • Code Cola - CSS样式可视化插件插件图片
  • Code Cola - CSS样式可视化插件插件图片

Code Cola - CSS样式可视化插件基本信息

插件名称：Code Cola - CSS样式可视化插件 插件作者：www.zhouqicf.com 插件语言：支持多种语言 官方站点：http://www.zhouqicf.com/code-cola 插件唯一标识：lomkpheldlbkkfiifcbfifipaofnmnkn

Code Cola - CSS样式可视化插件用户数和评分

下载次数：51288 用户评分：4.65068 (共5分) 参与评分人数：146

Code Cola - CSS样式可视化插件文件信息

当前版本：3.5.0 最后更新日期：2020-07-09 文件大小：188KB

Code Cola - CSS样式可视化插件下载地址

进入下载（已有 51288 人下载）
HTMLCSS

Code Cola - CSS样式可视化插件相关插件

Code Cola - CSS样式可视化插件

Code Cola - CSS样式可视化插件

开发者插件 2019-11-04 09:45:31

Code Cola是一款能查看网页代码样式的chrome CSS样式可视化插件，主要能查看页面板块中的所有样式元素，并能通过配置到服务器上的文件进行在线编辑。相信大家都知道，网页设计出来以

Emmet LiveStyle：实时高效的CSS编辑器

Emmet LiveStyle：实时高效的CSS编辑器

开发者插件 2020-12-23 23:20:42

Emmet LiveStyle是一款可以提高开发效率的CSS编辑器开发者插件。LiveStyle目前不仅仅支持一Chrome浏览器，还支持Safari浏览器，可以实时进行CSS调试插件工具，非常适合前端工程师的使用，用

Stylist：自定义网页CSS

Stylist：自定义网页CSS

开发者插件 2019-12-30 22:51:57

我们在上时间对着电脑上网后，即使不厌倦了网页的字体也很可能会出现视力疲劳的情况，有事会想自己给Google写CSS？想恶搞网页？或者修改一下网页的字体或者背景色等！这一切的需

网站样式管理器-Stylish

网站样式管理器-Stylish

开发者插件 2022-05-03 11:26:39

Restyle网络与时尚，一个用户样式管理器。时尚让你轻松安装主题和外观的许多著名景点。
用户风格主题的网站。用户样式赋予你的浏览体验，让你自定义的网站。拿出不相关的内容

css auto reload

css auto reload

开发者插件 2019-11-15 15:31:09

css auto reload 是一个web开发者工具，一款chrome 插件。在写 css 的时候，经常需要不断的切换窗口，刷新页面，查看效果，css auto reload 插件可以在你改变了css并保存好后，自动在页面上重新

CSS remove and combine

CSS remove and combine

开发者插件 2019-12-31 00:20:27

CSS remove and combine是一款可以通过创建仅包含正在使用的选择器的新CSS样式表来删除页面上未使用的CSS规则的插件

Code Cola - CSS样式可视化插件同类插件推荐

显示浏览器版本

显示浏览器版本 Chrome插件

开发者插件 2020-04-05 06:50:13

简介：只需点击拓展图标，一键查看当前浏览器的版本号，非常便利！
功能说明：只需点击拓展图标，一键查看当前浏览器的版本号，非常便利！

jQuery Audit

jQuery Audit Chrome插件

开发者插件 2015-03-22 10:26:32

审计jQuery的委托事件，内部数据，等等。
jQuery的审计中创建包含jQuery的下放事件，内部数据，多元素面板侧边栏，活DOM节点，功能和对象。
< 。 BR / >查找授权事件及其处理程序

变量的行为就像在＆ QUOT对象;源面板 - 范围变量＆ QUOT ;侧边栏。在功能和GOTO ＆ QUOT您可以右键单击，显示功能定义和QUOT ;，或将鼠标悬停在一个DOM节点，以突出它的文件中，以及右键单击它＆ QUOT ;显示元素面板＆ QUOT ;.

Http User-Agent Switcher

Http User-Agent Switcher Chrome插件

开发者插件 2018-08-23 05:08:10

扩展预先定义了多达超过 60 种基于不同浏览器和设备的 User-agents 供你选择！下面是一份简单的列表:

- 浏览器: Internet Explorer, Firefox, Safari, Opera, Microsoft Edge 等。
- 搜索引擎蜘蛛: Baiduspider, Bingbot, Googlebot, Yahoo! Slurp, Y

NoFollow Simple

NoFollow Simple Chrome插件

开发者插件 2019-05-19 03:13:46

概述网页上
这个扩展的所有nofollow的链接将勾勒出网页上的所有链接nofollow的

- 网址：
http://www.igorware.com/
- 联系方式和放大器;报告问题：
http://www.igorware.com/co

MagiCSS - Live CSS Editor

MagiCSS - Live CSS Editor Chrome插件

开发者插件 2015-12-20 22:06:43

Live+preview+of+CSS+changes+with+an+in-page+CSS+editor.+Beautify+CSS%2c+minify+CSS%2c+syntax+highlighting+and+create+GitHub+Gist+%26amp%3b+mail.%3cbr%2f%3eCreated+by%3a%3cbr%2f%3e++-+Priyank+Parashar+

护心镜

护心镜 Chrome插件

开发者插件 2016-11-28 22:03:06

可以动态防御XSS攻击，并帮助管理员发现XSS漏洞的扩展
护心镜 是由360 WEB攻防团队0KEE Team开发用来防御前端脚本攻击的工具，由浏览器扩展和告警平台两部分组成。安装了护心镜的浏览器，可降低网站后台、邮箱等账户被黑客控制的风险。 目前为止，没有任何一款杀毒软件可以让浏览器主动防御XSS攻击。 如果您是邮箱、微博等社交应用的重度用户，或者工作中有比较重要的网站后台，都可使用本工

Webview Develop Tools

Webview Develop Tools Chrome插件

开发者插件 2019-01-29 01:03:55

用于Hybrid Webview开发调试，模拟客户端接口，可配置，可自定义返回数据。支持多客户端，现在已经适配了邮箱大师，蜂鸟OA。对于其他客户端只需简单的适配以及添加相应的配置文件就可使用。

Nextsense XML Signing Component v1.0.1.3

Nextsense XML Signing Component v1.0.1.3 Chrome插件

开发者插件 2019-05-05 13:32:51

Nextsense XML 签名组件是支持 XML 文档数字签名和签名验证的基于 web 的组件。该产品的开发是为了使浏览器能够使用用户的本地数字证书对文档进行签名，并且得到了领先的 web 浏览器的支持。Nextsense XML 签名组件具有以下优点:
-使用用户的本地数字证书从 web 浏览器对文档进行简单的数字签名,它提供了签名者身份和文档完整性的证明
-支持检测和验证

为打击盗链困扰，本站已启用公众号人机验证
微信扫码关注公众号，发送"插件"二字获得验证码，验证码5分钟有效。

Chrome插件离线安装方法