Debug CSS

Debug CSS

Debug CSS

热度 2823

当前版本 1.0
插件大小 18.32KiB
所属分类 开发者工具
更新时间 2018年9月12日
Chrome store open chrome web store
随机推荐 阿里云服务器2核2G 99元/1年(续费同价!)

Debug CSS插件简介

Debug CSS(扩展包名:igiofjnckcagmjgdoaakafngegecjnkj)由 开发,最新版本1.0 于 2018年9月12日 更新。 Debug CSS 属于开发者工具分类。

🌹 这个应用程序可以在 ChromeFK 或 Google Chrome 网上应用商店进行下载。 ChromeFK上的所有插件扩展文件都是原始文件,并且 100% 安全,下载速度快。
Adds outline to all elements on the page to show the culprit element which is changing desired layout

Debug CSS插件描述

# Debug CSS

A lightweight extension f Google chrome to show outline of all the element exist on page.

while wking on web page development the one of the difficult part is to position the element as required  check which element affecting the other one.

This chrome extension allows user to see outline on every element of the page. Hold the keyboard Ctrl button  hover element it will show the element details along with the value.



# Usage

Post installation simply click on the extension icon to turn it On  Off.

If you are a keyboard shtcut lover like me simply hit `Alt+Shift+C ` key to toggle the extension.




# How it wks?

This extension wks on CSS outline attribute:

add the below code snippet in any CSS of a web page 


`
  * {
	outline: 1px solid red;
  }`

The extension does the same the only thing is; it gives different col to different element(s) while the code snippet adds red outline to every element.  



# Other wk  reposity

[A lightweight customizable plugin f jQuery to show hizontal  in fm of vertical progress bar.](https://github.com/pranayjoshicse/VerLim.js)


[listed on jqueryscript.net](https://www.jqueryscript.net/other/SimpleCustomReadingIndicatwithjQueryVerLimjs.html)

[Demo](https://www.jqueryscript.net/demo/SimpleCustomReadingIndicatwithjQueryVerLimjs/)




# Me about me

[twitter.](https://twitter.com/pranayjoshicse)
[about me.](https://about.me/pranayjoshi)
                                

Debug CSS插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入:chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx,然后将其从资源管理器中拖动到Chrome的扩展管理界面中,这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 Debug CSSChrome插件v1.0版本到本地。

5.勾选开发者模式,点击加载已解压的扩展程序,将文件夹选择即可安装插件。

注意:最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息,参照这篇文章即可解决

历史版本

(如何离线安装?)
版本号 文件大小 下载

Debug-CSS(1.0)

18.32KiB 城通网盘