ProtoTool (CSS auto refresh, design overlay)下载 - 插件下载

基本信息

更新日期:: 2020-04-29
包名:: kobijmefblkndpicohiondpdnpojebjd
版本:: 0.21
大小:: 117KiB
类型:: Chrome
平台:: Chrome

评分:: 21
发布日期:: 2014-10-13
价格:: 免费
开发者:: vaclovas.vicius

ProtoTool (CSS auto refresh, design overlay)插件截图

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

Front-end development tool. Auto css file refresh without page reloading, dedicated pixel perfect mode with mock-up overlay. 前端开发工具。自动css文件刷新无需页面重新加载，专用像素完美模式与模型覆盖。

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

中文翻译

厌倦了刷新你的css？项目加载要比更改css花费更多？使用SASS并希望在不进行真正刷新的情况下重新加载文件？救援原型！

一。自动重新加载CSS/SCSS文件
2。使用“像素完美模式”创建像素完美布局
3。媒体查询视图
4。网格线切换（正在开发中）
5。差模

重要提示：
1。默认情况下，插件可以在每个页面上工作，然后开发工具被打开并停靠在屏幕右侧。如果开发人员工具停靠在底部，css将仅在mouseenter之后重新呈现。
2。建议重新加载css的方法是：
a）转到chrome扩展，选择ProtoTool扩展选项：http://prntscr.com/4tnwz4
b）您将看到对话框，其中必须输入域字符串。假设您有http://localhost.com，那么您只需要输入localhost.com。按“保存选项”即可！http://prntscr.com/4tny5m。删除选项将删除整个域列表。在以后的版本中，扩展将可以选择逐个删除项。

3。像素完美模式。这是使用此模式将实现的目标的示例：http://prntscr.com/4tobkq（按图片查看差异）
a）将网站截图复制到特定的项目目录（假设您的网站设计保存在文件“1.png”中，相对于项目放在文件夹“mockups”中）。按SHIFT+1，您将看到控制面板：http://prntscr.com/4to1ci
b）prototype中的URL是project中的相对URL，您希望在其中添加模型覆盖。“文件路径”是一个模拟url，它将覆盖您的网站。比方说，你有“http://proto.test/contact us.html”，并且你想用图像“http://proto.test/mockups/1.png”覆盖，所以你的“prototype”中的“URL”是“/contact us.html”（区分大小写），而“File path”是“/mockups/1.png”，然后按“Assign URL with File”。刷新并按SHIFT+1，将看到附加到页面的覆盖。你可以用鼠标拖动你的图像。如果要在按住SHIFT按钮的同时增加或减少不透明度，请按“-”或“+”。SHIFT+2将进入差异模式。

如果您有任何反馈或问题，请发送电子邮件给我：
电子邮件：vaclovas.vicius@gmail.com
LinkedIn简介：https://www.LinkedIn.com/pub/vaclovas vi%C4%8Dius/23/83b/822