ProtoTool (CSS auto refresh, design overlay)

开发者工具插件用户量: 994大小: 0.11MiB版本: v 0.21更新时间: 2014-10-13
用户量:994大小:0.11MiB版本:v 0.21更新时间:2014-10-13

Front-end development tool. Auto css file refresh without page reloading, dedicated pixel perfect mode with mock-up overlay.

ProtoTool (CSS auto refresh, design overlay) 的使用方法详解,最全面的教程


ProtoTool (CSS auto refresh, design overlay) 描述:

用户数:994

分类:开发者工具插件

扩展大小:0.11M

最后更新时间:2014-10-13

版本:v 0.21


ProtoTool (CSS auto refresh, design overlay) 插件简介:

这是来自Chrome商店的 ProtoTool (CSS auto refresh, design overlay) 浏览器插件,您可以在当前页面下载它的最新版本安装文件,并安装在Chrome、Edge等浏览器上。


ProtoTool (CSS auto refresh, design overlay)插件下载方法/流程:

点击下载按钮,关注“扩展迷Extfans”公众号并获取验证码,在网页弹窗中输入验证码,即可下载最新安装文件。


ProtoTool (CSS auto refresh, design overlay)插件安装教程/方法:

(1)将扩展迷上下载的安装包文件(.zip)解压为文件夹,其中类型为“crx”的文件就是接下来需要用到的安装文件

(2) 从设置->更多工具->扩展程序 打开扩展程序页面,或者地址栏输入 Chrome://extensions/ 按下回车打开扩展程序页面

(3) 打开扩展程序页面的“开发者模式”

(4) 将crx文件拖拽到扩展程序页面,

完成安装如有其它安装问题,

请扫描网站底部二维码与客服联系如有疑问请参考:

https://www.extfans.com/installation/
Tired from refreshing your css? Project loading takes more, than changing css? Using SASS and want to reload file without real refresh? ProtoTool to the rescue! 1. Auto reloads your CSS/SCSS files 2. Create pixel perfect layouts with "Pixel perfect mode" 3. Media query view 4. Grid line toggling (under development) 5. Difference mode IMPORTANT notes: 1. By default plugin works on every page, then dev tools are turned on and docked to the RIGHT of the screen. If developer tools are docked to bottom - css will re-render only after mouseenter. 2. RECOMMENDED way to reload your css is: a) go to chrome extensions, choose ProtoTool extension options: http://prntscr.com/4tnwz4 b) You will see dialog, where you have to enter your domain string. Let's say you have http://localhost.com, so you will have to enter localhost.com ONLY. Press Save options and thats it! http://prntscr.com/4tny5m . Remove options will remove WHOLE list of domains. In future versions, extension will have option to remove items by one. 3. PIXEL PERFECT MODE. This is example of what you will achieve with this mode: http://prntscr.com/4tobkq (image is pushed to see difference) a) copy website screenshot to your specific project directory (let's say you have website design saved in file "1.png", placed in "/mockups" folder relatively to project). Press SHIFT + 1, you will see control panel: http://prntscr.com/4to1ci b) URL in prototype is relative URL in project, where you want to add your mockup overlay. "File path" is an mockup url, which will overlay your website. Let say, you have "http://proto.test/contact-us.html" and you want to overlay with image "http://proto.test/mockups/1.png", so your "URL in prototype" will be "/contact-us.html" (it's case sensitive) and "File path" will be "/mockups/1.png", then press "Assign URL with file". Refresh and press SHIFT + 1, wou will see overlay attached to your page. You can drag your image with mouse. Press "-" or "+" if you want to increase or decrease opacity while holding SHIFT button. SHIFT + 2 will enter difference mode. If you have any feedback or questions - please email me: Email: vaclovas.vicius@gmail.com LinkedIn profile: https://www.linkedin.com/pub/vaclovas-vi%C4%8Dius/23/83b/822

相关应用

브라우저에서 라온시큐어의 PC보안 기능을 사용하기 위한 확장 프로그램입니다.
Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions!
Расширение позволяет использовать КриптоПро ЭЦП Browser plug-in в браузере. Для работы требует установленного ЭЦП Browser plug-in.
Adds React debugging tools to the Chrome Developer Tools. Created from revision 82762bea5 on 3/10/2022.
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
POSTMAN CHROME IS DEPRECATED DOWNLOAD THE UPDATED POSTMAN NATIVE APPS Postman Chrome is deprecated and is missing essential, new…
EditThisCookie是一个cookie管理器。您可以添加,删除,编辑,搜索,锁定和屏蔽cookies!
The Facebook Pixel Helper is a troubleshooting tool that helps you validate your pixel implementation.
Tag Assistant helps to troubleshoot installation of various Google tags including Google Analytics, Google Tag Manager and more.
back top top
back top top