16 款优秀的Web开发辅助工具推荐
jopen 12年前
<p> 优秀的工具，可以使你的开发工作事半功倍，帮助你创建出高品质的 Web 应用。</p> <p> 本文整理了 16 款重要的 Web 开发工具，涵盖 CSS、JavaScript、图像优化和其他方面的 Web 开发工作，希望对你的开发工作能有所帮助。</p> <p> <strong>一、CSS 工具</strong></p> <p> <strong>1. <a href="/misc/goto?guid=4958340816949226458" target="_blank">Simpless</a></strong></p> <p> 这是一个免费的离线 LESS 代码编译器。如果你使用 LESS，这是一个伟大的工具，能够自动检测代码变化，并编译它。可在 Mac、Windows 和 Linux 平台上使用。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/de5297e77b681c7a195dfcd7fdc4b6c3.jpg" width="500" height="250" /></p> <p> <strong>2. <a href="/misc/goto?guid=4958327125852074802" target="_blank">CSSWrap</a></strong></p> <p> 一个很酷的 CSS 文本路径生成工具。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/07c079045df6ba2f150b2a8edfa14749.jpg" width="500" height="250" /></p> <p> <strong>3. <a href="/misc/goto?guid=4958323053586155107" target="_blank">LayerStyles</a></strong></p> <p> 不想去记新的 CSS3 特性和前缀？该工具使用类似于 Photoshop 图层样式的界面，让你轻松配置阴影、背景、边框和边界半径。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/768fcaa82613efc6a41a49c91d38f5a8.jpg" width="500" height="250" /></p> <p> <strong>4. <a href="/misc/goto?guid=4958340819226818094" target="_blank">BearCSS</a></strong></p> <p> 该工具可以根据上传的 HTML 文档，采集其中所使用的 HTML 元素，来生成 CSS 模板。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/4e0d12eeec4493bb257f2aa760f5ae5a.jpg" width="500" height="250" /></p> <p> <strong>二、JavaScript 工具</strong></p> <p> <strong>5. <a href="/misc/goto?guid=4958340820018766593" target="_blank">Bookmarkleter</a></strong></p> <p> 该工具可以将你的 JavaScript 代码转换成一个小书签，帮助你进行代码压缩和 URL 编码。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/cc9e293d45d9f281bc89902a50b0c167.jpg" width="500" height="250" /></p> <p> <strong>6. <a href="/misc/goto?guid=4958340820821384270" target="_blank">JSLint</a></strong></p> <p> 这是一个 JavaScript 调试工具。可以查找代码中的潜在问题，并返回一条消息，告诉你问题以及位置。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/dd92be8ff4eeeed76dcef5f6ed0a4848.jpg" width="500" height="250" /></p> <p> <strong>7. <a href="/misc/goto?guid=4958340821616674336" target="_blank">ShowIF</a></strong></p> <p> 这是一个简单的 if...else 工具，允许用户设置基于客户端环境（浏览器、操作系统、分辨率等）的条件，如果条件匹配则执行指定的动作。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/92dca77151526ad4f37f2cc24333805e.jpg" width="500" height="250" /></p> <p> <strong>三、图像优化工具</strong></p> <p> <strong>8. <a href="/misc/goto?guid=4958340822411526631" target="_blank">JPEG Mini</a></strong></p> <p> 在保持 JPEG 图片原有品质和格式的情况下，使图片大小减少为原来的1/5。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/7e962400f09951bc3a1a75d52016d32f.jpg" width="500" height="250" /></p> <p> <strong>9. <a href="/misc/goto?guid=4958340823210692451" target="_blank">PunyPNG</a></strong></p> <p> 该工具可以大大降低图像文件的大小，且没有任何质量损失。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/b0b10efc2c2365ee3d62c09f4eae03d9.jpg" width="500" height="250" /></p> <p> <strong>10. <a href="/misc/goto?guid=4958340824004497462" target="_blank">SpritePad</a></strong></p> <p> 一个快速、用户友好的在线 CSS sprite 生成器，支持图像拖拽，并可以生成你需要的 CSS 代码。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/2b9ee2b0b4e6cf85bd511e7bddf976b6.jpg" width="500" height="250" /></p> <p> <strong>11. <a href="/misc/goto?guid=4958340824804013178" target="_blank">SpriteMe</a></strong></p> <p> 该工具以一种不同的方式来创建 CSS sprite。这是一个书签，可以检测你网站中的图像，并相应地进行 CSS sprite。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/b005ebf6e63929fbdbe2fb95a008358e.jpg" width="500" height="250" /></p> <p> <strong>四、其他工具</strong></p> <p> <strong>12. <a href="/misc/goto?guid=4958340825609630484" target="_blank">Browsers</a></strong></p> <p> 实用的浏览器沙箱。你可以运行任何浏览器，而无需将它们安装到你的电脑中。目前只支持 Windows 平台。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/b803c95ee1437cecf4d574008e149e4f.jpg" width="500" height="250" /></p> <p> <strong>13. <a href="/misc/goto?guid=4958323074792285696" target="_blank">SpurApp</a></strong></p> <p> 该工具使用不同的方法来测试页面的可用性和布局，利用的技术包括灰度、交叉点、间隔、对比、模糊、镜像等，为你展示你可能会忽略的设计缺陷。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/e327565f8aee312ec13c015f66c4f3bc.jpg" width="500" height="250" /></p> <p> <strong>14. <a href="/misc/goto?guid=4958340827140596753" target="_blank">Pingdom</a></strong></p> <p> 用于测试网站的加载时间，并分析，帮助你找出瓶颈。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/0fb04f0b925e9cfa570c65607b42d17c.jpg" width="500" height="250" /></p> <p> <strong>15. <a href="/misc/goto?guid=4958198473448168491" target="_blank">Loads.in</a></strong></p> <p> 另一款计算网站加载时间的工具。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/777f92e776e82de47b28f5267cc95f0e.jpg" width="500" height="250" /></p> <p> <strong>16. <a href="/misc/goto?guid=4958340828669036024" target="_blank">HTML5 Test</a></strong></p> <p> 测试浏览器对 HTML5 标准和规范的支持情况。</p> <p style="text-align:center;"><img alt="16 款优秀的Web开发辅助工具推荐" src="https://simg.open-open.com/show/8ba24abaaaea2f435ff6e294c8f133e5.jpg" width="500" height="250" /></p> <p> 原文：<a href="/misc/goto?guid=4958340829467143410" target="_blank">16 Essential Web Development Online Tools</a></p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958340830265243950" target="_blank">www.iteye.com</a> </div>