页面开发辅助工具(内部文章转贴)

最新推荐文章于 2023-10-30 22:22:42 发布
最新推荐文章于 2023-10-30 22:22:42 发布
阅读量1.5k 收藏
点赞数
分类专栏： 开发文档和规范 HTML相关 JavaScript 文章标签： 工具 javascript microsoft safari firebug opera

        网站开发者的一大苦恼，就是有太多的浏览器要应付。幸亏世界上有一些聪明的人，能够研究出一大些方便编辑和调试网页代码的好工具。不过， 要从不计其数的小工具里面找出合适的可真不容易。这篇文章列出了几个最好用的web开发工具，并指导你快速地激活、安装、使用他们。

下面是工具列表

浏览器可用的工具 (括号中是应用范围)

Firefox

Web Developer Toolbar (多用途)

Firebug (DOM, CSS, JavaScript, 流量)

Modify Headers (Ajax)

Poster (Ajax)

XRAY, MRI (CSS)

Firefox Accessibility Extension

LiveHTTPHeaders

IE6, IE7

IE Developer Toolbar (DOM, CSS)

Web Accessibility Toolbar (可读性及更多功能)

XRAY, MRI (CSS)

Visual Web Developer Express Edition (JavaScript)

Microsoft Script Debugger (JavaScript)

Opera

Opera developer tools (DOM, CSS, JavaScript)

Opera Error Console (HTML, CSS, JavaScript)

XRAY, MRI (CSS)

Web Accessibility Toolbar (可读性及更多功能)

Safari

Safari Debug Menu (JavaScript)

XRAY, MRI (CSS)

Web Inspector (Safari 3) (CSS, DOM)

--------------------------------------------------

Web Developer Toolbar

Firefox上开发和调试web站点的不二之选。Web developer toolbar包含了一系列工具，从cookie管理到CSS调试，从导航线到屏幕标尺，功能简直是多得说不完。 Web开发工具栏 下载地址：http://chrispederick.com/work/web-developer/

Firebug

萤火虫 是Firefox上数一数二的好扩展，可作为web developer toolbar的补充工具。你可以用Firebug在线检查、监控、编辑网页上的HTML、CSS、JavaScript代码。他还提供一个脚本控制台，让JS编辑编的更简单。控制台对象包含了一大堆选项，允许你输出代码到控制台然后进行调试。Michael Sync提供一个更高级的操作指南，它可以知道你详尽地设置Firebug的选项。另外，Firebug上有一个带宽监视器，能让你清楚地看到某些代码占了多少带宽。 Firebug 下载地址：http://www.getfirebug.com/

Modify Headers

Modify headers是一个可以添加、修改和过滤HTTP请求头的工具。你可以用这个工具冒充成移动设备登陆网站，它甚至可以伪造一个Ajax请求。 Modify Headers 下载地址：http://modifyheaders.mozdev.org/

Poster

你可以通过Poster扩展与Web服务或者其他web资源进行交互，它能让你发送HTTP请求、设置请求实体和内容格式。这可以让你检测Web交互的效果。 Poster下载地址：http://code.google.com/p/poster-extension/

XRAY & MRI

X光和核磁共振成像是可以应用在IE6+、Webkit和Mozilla为基础的浏览器上的bookmarklets（嘛叫Bookmarklets），包括Safari, Firefox, Camino和Mozilla. Xray 能帮你检测盒模型里的每一个元素，MRI可以测试和应用选择器。 XRay下载地址：http://www.westciv.com/xray/index.html MRI下载地址：http://www.westciv.com/mri/

Firefox Accessibility Extension

Mozilla/Firefox无障碍扩展让残疾人士方便地浏览网页内容。开发人员可以用这个扩展检查他们的结构和样式的网页易读性。 Firefox Accessibility Extension下载地址：http://firefox.cita.uiuc.edu/

IE Developer Toolbar

微软的英特网探索者开发工具条是IE上最好的DOM检查和CSS调试工具。由于IE具有高市场占有率而又在整个渲染模型上充满缺陷（比如臭名昭著的hasLayout边距重叠BUG），调试IE是web开发必不可少的步骤——没有这个工具条，IE的调试将会成为一场噩梦。虽然IE Developer Toolbar要比Firebug稍微弱智一点，不过他至少能帮你驯服IE这头怪兽。 IE Developer Toolbar下载地址：

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Web Accessibility Toolbar

The Web Accessibility Toolbar（Opera版）可以检查网站的易读性（当然是可能的易读性，总不能指望电脑能像人一样读网页吧？）此外，这个工具还提供其他功能，比如检查死链接和改变浏览框大小等等。 The Web Accessibility Toolbar下载地址:http://www.visionaustralia.org.au/ais/toolbar/

Visual Web Developer Express Edition

IE开发工具栏木有JavaScript调试功能，你得找个别的工具搞JS。你可以用Microsoft Script Debugger（下面将提到）或者免费下载这个重量级的Visual Web Developer Express Edition。Bernie那儿有这个工具的教程（当然是英文的），它详尽地告诉你如何用这个工具调试JavaScript代码。

你也可以用Microsoft Script Editor 编辑 JS代码——不幸的是，这并不是个免费工具（在国内，这似乎不是个大问题）。他被捆绑在Office 2003安装包里，而微软又不提供单独下载。正因为如此，这儿就不多提它了。Jonathan Boutelle提供了这个工具的一些教程。

Microsoft Script Debugger

你可以在微软网站上免费下载这个工具，MSDN上也有一个相关文档。这个工具比Visual Web Developer Express Edition弱很多，不过仍然能处理一些IE上那些让人摸不着头脑的提示，诸如“缺乏对象”一类。Jake Howlett 有个《如何使用Microsoft Script Debugger调试JavaScript》的教程。为安全起见，安装脚本调试器之后最好要重新启动一下你的电脑。 Microsoft Script Debugger下载地址： http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en

Opera developer tools

Opera有两个开发工具：Opera 开发控制台(Opera Developer Console)和Dom快照工具(DOM Snapshot)。从截图来看，他们都很有前途。这个工具算是Opera 9以上版本用的bookmarklets。不过我没能让他们在Opera 9.10上成功运作。 Opera开发工具下载地址：http://dev.opera.com/tools/

Opera Error Console

错误控制台是Opera的一个内置功能，可以在工具-高级-错误控制台中激活这个它。它能弹窗显示当前网页上的错误或者警告信息，或者你可以过滤某种类型的信息，比如HTML、CSS、XML或者Javascript警告。你可以在opera网站找到错误控制台的详细教程。

Safari Debug Menu

Safari的debug能力很弱，但至少显示一个Javascript控制台能让Javascript调试变得简单点儿（这与Firebug和Opera错误控制台类似）。在苹果网站的开发部门，有一个常见问题文档说明如何启用隐藏的调试菜单。 在Mac OS X下，打开一个终端然后输入：

defaults write com.apple.Safari IncludeDebugMenu 1

在windows 下，用文本编辑器打开Preferences.plist，这个文件的位置往往是C:/Documents and Settings/USERNAME/Application Data/Apple Computer/Safari/Preferences.plist，在文件最后添加：

<key>IncludeDebugMenu</key> <true/>

在Safari 1.3及以上版本，你可以进入Debug菜单然后钩选“记录Javascript意外”的选项。然后选择“显示JavaScript Console”。这就可以用控制台记录Javascript错误。

Web Inspector

要在Mac OS上激活Safari Web Inspector (Safari 3及以上可用)，打开终端窗口然后输入

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

在windows中，打开Documents and Settings/*你的用户名*/Application Data/Apple Computer/Safari/WebKitPreferences.plist，添加以下内容：

<key>WebKitDeveloperExtras</key> <true/>

然后退出Safari并重新打开，你将在菜单中看到一个“检查元素”选项，就是它了！ 

就不说我是胡哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webXray:webXray是用于检测第三方HTTP请求并将其与接收用户数据的公司进行匹配的工具
05-15
webXray webXray是一种工具，用于检测大量网页上的第三方HTTP请求，并将其与接收用户数据的公司进行匹配。 可以在上找到更多信息。 为什么 第三方HTTP请求是最低级别的机制，通过该机制，用户数据可以被秘密地公开给网络上的未知方。 这可能是出于完全良性的原因，例如嵌入了另一个站点的图片，或者可能是利用跟踪像素，Cookie甚至是复杂的指纹识别技术进行监视的一种形式。 如何 与现有工具不同的是，webXray通过将域请求与域所有者相关联，方便了对向其发出请求的真实实体的标识。 换句话说，webXray允许您查看哪些公司正在监视哪些页面。 webXray的核心是一个python程序，它提取网页地址，将其传递给无头网页浏览器PhantomJS，并解析请求，以确定那些去往与主域名（或第一方域名）无关的域名的请求。地点。 然后将这些数据存储在MySQL中，以供以后分析。 WHO
超级棒的170+款web前端开发工具汇总，千万要收藏好！
男神的专栏
07-14 5677
作者：web前端开发我们与企业内部的Web开发团队进行了很多次交流，研究了很长时间，最后将Debug工具与Web前端开发工具整理汇总在了一起，这些工具对每个Web开发人员都非常有用。这些工具将使您的工作更加轻松，特别是如果您是Web开发人员，Web设计人员或项目经理。您应该查看一下并尝试一下。不管您是网站开发人员还是设计师？这些工具将使您的生活和工作流程更加轻松。网址：http://alertifyjs.com/AlertifyJS是一个JavaScript框架，用于开发漂亮的浏览器对话框和通知。
web前端常见开发工具汇总 你用过几个？
最新发布
前端与统计学爱好者，盈握之璧，不必采于昆仑之山
10-30 1624
另一款名叫Hbuilder，这款IDE最吸引人的便是令人感到舒适的用户界面，试想在长期开发的工作压力下，生理心理方面都会有负面的反馈，这时一款美观的开发工具就显得尤为重要，不过相比之下，学长还是更喜欢vscode，各位感兴趣的小伙伴可以自行了解哦。这种方式的优点是成本低，入门门槛小，适合初学者进行一个浅层的理解与练习。第三个是中文汉化，vscode的汉化还是比较不错的，建议初学者都汉化一下，方便初始阶段的学习，当然资深开发者可以不装，毕竟外国的开发工具相似度很高，其实接触的时间长了，大部分英语很容易理解。
82个Web开发者工具汇总
保持微笑的博客
01-11 2479
01、Day.js 地址：https://day.js.org/en/ Day.js 是一个极简的 Javascript 库，大小只有大约 2Kb。它可以在浏览器和 NodeJs（服务器端）上工作。 它和moment js非常相似，所以切换到这个库时你可以放心。此外，它还可以在当今最流行的浏览器上运行，例如 Windows XP 上的 Chrome，Windows 7 上的 IE 8、9 和 10，Windows 10 上的 IE 11，Linux 上最新的 Firefox，以及新的 Saf...
超详细！小白入门PythonWeb开发详解！
weixin_68789096的博客
10-24 3988
FastAPI 是 Python 开发的一个开源 Web 框架，几乎包括了 Web 应用的所有内容，可用于快速搭建高性能、优雅的网站应用。最主要的是，FastAPI 提供了 Web 开发经常使用到的模块，包括自动生成接口文档等，使开发者能够专注业务部分。
动易系统的论坛转贴工具
06-06
是在站长站下载频道看见的，发现这个小东西很好玩！至少能方便更多访客转载网站内容转发到别的论坛上，给网站增加反向连接
脚本之家贴图转换+转贴工具用到的js代码超级推荐
01-21
[removed] <!– function SymError() { return true; } [removed] = SymError; //–> [removed] [removed] function delnull() { var str=document.getElementById(‘text’).value; str=str.replace(/([\s...
使用MIMI开发工具
12-16
使用MIMI开发工具以实践认知世界，以实事构架世界，使用MIMI开发工具总能给你最需要、最实用、最真实的，...该文档为使用MIMI开发工具，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
论坛转贴工具
10-30
论坛转贴工具提供常的转换追加，转换覆盖，预览贴子，分析超链接，屏蔽文字，图片，超链接，提供查找，替换等功能，HTML版，支持IE浏览器，360浏览器，搜狗浏览器，火狐浏览器，谷歌chrome浏览器等主流浏览器，无需...
东度极品论坛转贴工具
04-09
东度极品论坛转贴工具东度极品论坛转贴工具
webXray：webxray是一种用于分析网页上的第三方内容并识别收集用户数据的公司的工具
02-11
webXray 注意：此版本不在积极开发中，不提供任何支持。 2021年将发布经过改进的新版本。 webXray是用于分析网页上的第三方内容并识别收集用户数据的公司的工具。 命令行用户界面使webXray易于非程序员使用，那些有高级需求的人可以使用正确的配置来分析数百万个页面。 webXray是专为学术研究而设计的专业工具，隐私合规官，监管人员以及对网络上的隐藏数据流充满好奇的人们可能会使用它。 webXray使用域所有权的自定义库来绘制从给定的第三方域到公司所有者以及母公司（如果适用）的数据流。 webXray生成的跟踪归因报告提供了可靠的粒度。 开箱即用的报告每个站点的第三方和cookie的平均数量，最常出现的第三方域和元素，传输的数据量，SSL加密的使用等报告。 灵活的数据模式允许生成自定义报告以及编写扩展以添加其他数据源。 webXray的公共版本使用Chrome加载页面，
IE4.0 IE5.0 IE5.5 IE6.0集合
09-23
微软IE浏览器4.0 5.0 5.5 6.0珍藏集合下载。 适合于Win95，NT4，Win98，Win2000升级
Xray-web漏洞扫描工具.zip
02-02
xray 是一款功能强大的安全评估工具，由多名经验丰富的一线安全从业者呕心打造而成，主要特性有: 检测速度快。发包速度快; 漏洞检测算法高效。 支持范围广。大至 OWASP Top 10 通用漏洞检测，小至各种 CMS 框架 POC，均可以支持。 代码质量高。编写代码的人员素质高, 通过 Code Review、单元测试、集成测试等多层验证来提高代码可靠性。 高级可定制。通过配置文件暴露了引擎的各种参数，通过修改配置文件可以极大的客制化功能。 安全无威胁。xray 定位为一款安全辅助评估工具，而不是攻击工具，内置的所有 payload 和 poc 均为无害化检查。 目前支持的漏洞检测类型包括: XSS漏洞检测 (key: xss) SQL 注入检测 (key: sqldet) 命令/代码注入检测 (key: cmd_injection) 目录枚举 (key: dirscan) 路径穿越检测 (key: path_traversal) XML 实体注入检测 (key: xxe) 文件上传检测 (key: upload) 弱口令检测 (key: brute_force) jsonp 检测 (key: jsonp) ssrf 检测 (key: ssrf) 基线检查 (key: baseline) 任意跳转检测 (key: redirect) CRLF 注入 (key: crlf_injection) Struts2 系列漏洞检测 (高级版，key: struts) Thinkphp系列漏洞检测 (高级版，key: thinkphp) POC 框架 (key: phantasm) 其中 POC 框架默认内置 Github 上贡献的 poc，用户也可以根据需要自行构建 poc 并运行。 设计理念 发最少的包做效果最好的探测。 如果一个请求可以确信漏洞存在，那就发一个请求。如果两种漏洞环境可以用同一个 payload 探测出来，那就 不要拆成两个。 允许一定程度上的误报来换取扫描速度的提升 漏洞检测工具无法面面俱到，在漏报和误报的选择上必然要选择误报。如果在使用中发现误报比较严重，可以进行反馈。 尽量不用时间盲注等机制检测漏洞。 时间检测受影响因素太多且不可控，而且可能会影响其他插件的运行。因此除非必要（如 sql）请尽量使用与时间无关的 payload。 尽量不使用盲打平台 如果一个漏洞能用回显检测就用回显检测，因为盲打平台增加了漏洞检测过程的不确定性和复杂性。 耗时操作谨慎处理 全局使用 Context 做管理，不会因为某个请求而导致全局卡死。 简易架构 了解 xray 的整体架构可以更好的理解 cli 和配置文件的设置，方便大家更好的使用。 整体来看，扫描器这类工具大致都是由三部分组成： 来源处理 漏洞检测 结果输出 来源处理 这一部分的功能是整个漏洞检测的入口，在 xray 中我们定义了四个入口，分别是 HTTP 被动代理 简易爬虫 单个 URL URL列表的文件 单个原始 HTTP 请求文件 漏洞检测 这一部分是引擎的核心功能，用于处理前面 来源处理 部分产生的标准化的请求。用户可以针对性的启用插件，配置扫描插件的参数，配置 HTTP 相关参数等。 结果输出 漏洞扫描和运行时的状态统称为结果输出，xray 定义了如下几种输出方式: Stdout (屏幕输出, 默认开启) JSON 文件输出 HTML 报告输出 Webhook 输出 使用教程见：xray 是一款功能强大的安全评估工具，由多名经验丰富的一线安全从业者呕心打造而成，主要特性有: 检测速度快。发包速度快; 漏洞检测算法高效。 支持范围广。大至 OWASP Top 10 通用漏洞检测，小至各种 CMS 框架 POC，均可以支持。 代码质量高。编写代码的人员素质高, 通过 Code Review、单元测试、集成测试等多层验证来提高代码可靠性。 高级可定制。通过配置文件暴露了引擎的各种参数，通过修改配置文件可以极大的客制化功能。 安全无威胁。xray 定位为一款安全辅助评估工具，而不是攻击工具，内置的所有 payload 和 poc 均为无害化检查。 目前支持的漏洞检测类型包括: XSS漏洞检测 (key: xss) SQL 注入检测 (key: sqldet) 命令/代码注入检测 (key: cmd_injection) 目录枚举 (key: dirscan) 路径穿越检测 (key: path_traversal) XML 实体注入检测 (key: xxe) 文件上传检测 (key: upload) 弱口令检测 (key: brute_force) jsonp 检测 (key: jsonp) ssrf 检测 (key: ssrf) 基线检查 (key: baseline) 任意跳转检测 (key: redirect) CRLF 注入 (key: crlf_injection) Struts2 系列漏洞检测 (高级版，key: struts) Thinkphp系列漏洞检测 (高级版，key: thinkphp) POC 框架 (key: phantasm) 其中 POC 框架默认内置 Github 上贡献的 poc，用户也可以根据需要自行构建 poc 并运行。 设计理念 发最少的包做效果最好的探测。 如果一个请求可以确信漏洞存在，那就发一个请求。如果两种漏洞环境可以用同一个 payload 探测出来，那就 不要拆成两个。 允许一定程度上的误报来换取扫描速度的提升 漏洞检测工具无法面面俱到，在漏报和误报的选择上必然要选择误报。如果在使用中发现误报比较严重，可以进行反馈。 尽量不用时间盲注等机制检测漏洞。 时间检测受影响因素太多且不可控，而且可能会影响其他插件的运行。因此除非必要（如 sql）请尽量使用与时间无关的 payload。 尽量不使用盲打平台 如果一个漏洞能用回显检测就用回显检测，因为盲打平台增加了漏洞检测过程的不确定性和复杂性。 耗时操作谨慎处理 全局使用 Context 做管理，不会因为某个请求而导致全局卡死。 简易架构 了解 xray 的整体架构可以更好的理解 cli 和配置文件的设置，方便大家更好的使用。 整体来看，扫描器这类工具大致都是由三部分组成： 来源处理 漏洞检测 结果输出 来源处理 这一部分的功能是整个漏洞检测的入口，在 xray 中我们定义了四个入口，分别是 HTTP 被动代理 简易爬虫 单个 URL URL列表的文件 单个原始 HTTP 请求文件 漏洞检测 这一部分是引擎的核心功能，用于处理前面 来源处理 部分产生的标准化的请求。用户可以针对性的启用插件，配置扫描插件的参数，配置 HTTP 相关参数等。 结果输出 漏洞扫描和运行时的状态统称为结果输出，xray 定义了如下几种输出方式: Stdout (屏幕输出, 默认开启) JSON 文件输出 HTML 报告输出 Webhook 输出
IETest（IE浏览器集合)
05-30
本IETest一款集成IE6，IE7，IE8，IE9 的工具
web可视化开发工具
10-15
WebBuilder是一款跨平台、数据库和浏览器的可视化Web应用开发平台。WebBuilder使用了多项最新的技术，使Web应用的开发更快捷和简单。 作为一款高效的Web开发工具，WebBuilder的特色是： .基于浏览器的集成开发环境. .丰富的组件库 .开发应用简单快速 .高效率和高稳定性 .跨平台、数据库和浏览器 .服务器端的脚本支持 .智能的数据库访问机制 使用WebBuilder可开发ERP、OA、CRM、HR、MIS以及电信、银行、政府、企业等各行业的企业级应用系统，帮助信息化管理系统的快速构建。完善的基础架构，具有大型应用系统必须的完整功能，使应用系统的开发仅需致力于业务的开发。 您可以到 http://www.putdb.com 在线使用或下载到本地使用，软件开源并基于GPL协议授权。
最全的Web开发工具汇总！
信奥六点半的博客
07-09 2062
1、Sass Sass是最可靠、最成熟也是最强大的CSS扩展语言。这款工具可用来轻松扩展站点现有CSS的功能，例如变量、继承和嵌套等。 特性： 使用它的前端工具编写任何代码都非常简单明了 支持语言扩展，例如变量、嵌套和混合（mixins）； 提供了用于处理颜色和其他值的许多有用函数 高级功能，例如库的控制指令； 它提供了具有良好格式、可自定义的输出。 下载链接： http://sass-lang.com/ 2...
Web开发工具
04-19
在WEB 开发中，Html和JavaScript是不可缺少的工具<br/>还有Css<br/>互相学习吧
十个免费的web前端开发工具详细整理
08-29
主要介绍了十个免费的web前端开发工具详细整理的相关资料,希望通过本文大家能够理解使用免费web开发工具，需要的朋友可以参考下
if "贴现模板" or '转贴买断' in file:
05-31
if "贴现模板" or '转贴买断' in file: # do something ``` 它的实际效果是先判断 `"贴现模板"` 是否为真（非空字符串为真），如果为真就直接执行 `if` 语句块，不再判断后面的条件。因此，这个判断的实际效果等同...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值