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

限时加码!20+主流AI编程工具免费用 购周边加赠Coding Plan Lite,Claude Code、Cursor等即刻畅享,学习进阶更高效! 阅读详情

        网站开发者的一大苦恼,就是有太多的浏览器要应付。幸亏世界上有一些聪明的人,能够研究出一大些方便编辑和调试网页代码的好工具。不过, 要从不计其数的小工具里面找出合适的可真不容易。这篇文章列出了几个最好用的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并重新打开,你将在菜单中看到一个“检查元素”选项,就是它了! 

开发 Copilot |快速玩转AI 开发辅助工具 开发 Copilot 可以很好的协助开发者在编码、需求等方面给予帮助,让开发者提升开发效率和代码质量。云开发 Copilot 通过智能提示,打开逻辑思维空间,让开发者更加专注于业务逻辑,而不必担心编码细节和错误调试,减少开发时间,提升编码效率。同时,Copilot 的性能优化建议对于提升项目性能也非常有帮助。欢迎关注博主「六月暴雪飞梨花」或加入【六月暴雪飞梨花社区】 阅读详情

相关推荐

【小程序开发文章详情页面的设计】文章详情页面如何布局

本篇博客是小程序开发系列的第四篇,在上一篇博客中介绍的是首页的制作,除了展示轮播图图片,食谱的封面、名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面。 除了在首页的js里面编写跳转函数之外(函数用来获取轮播图/食谱/文章的id,并携带id进行页面跳转)我们还需要创建page,制作详情页面页面效果 在我的小程序中,文章详情页顶部的图片是一张固定的图片(也就是每篇文章的详情页顶部都使用同一张图片作为装饰)大家可以根据需要自行修改图片。 然后顶部图片下面展示的是文

m0_61088839的博客 3440

webXray:webXray是用于检测第三方HTTP请求并将其与接收用户数据的公司进行匹配的工具

webXray webXray是一种工具,用于检测大量网页上的第三方HTTP请求,并将其与接收用户数据的公司进行匹配。 可以在上找到更多信息。 为什么 第三方HTTP请求是最低级别的机制,通过该机制,用户数据可以被秘密地公开给网络上的未知方。 这可能是出于完全良性的原因,例如嵌入了另一个站点的图片,或者可能是利用跟踪像素,Cookie甚至是复杂的指纹识别技术进行监视的一种形式。 如何 与现有工具不同的是,webXray通过将域请求与域所有者相关联,方便了对向其发出请求的真实实体的标识。 换句话说,webXray允许您查看哪些公司正在监视哪些页面。 webXray的核心是一个python程序,它提取网页地址,将其传递给无头网页浏览器PhantomJS,并解析请求,以确定那些去往与主域名(或第一方域名)无关的域名的请求。地点。 然后将这些数据存储在MySQL中,以供以后分析。 WHO

php做一个文章页面,zblogPHP模板制作—文章页面常用到的标签大全

首先,这些标签在zblog官方网站的wiki里都有,但很多刚制作zblog模板的新人往往喜欢去百度,而没有精力把zblogPHP的wiki仔细看一遍,所以这里我就分享出来,也可以让自己梳理下:再次说明:要学习zblog模板制作,请先到zblog官方网站的wiki里全面学习,对于后期的模板制作更有好处,比如先分享下官方提供的文章页面标签:文章标签(含独立页面)标签含义备注{$article.ID}文...

weixin_42472263的博客 666

webXray:webxray是一种用于分析网页上的第三方内容并识别收集用户数据的公司的工具

webXray 注意:此版本不在积极开发中,不提供任何支持。 2021年将发布经过改进的新版本。 webXray是用于分析网页上的第三方内容并识别收集用户数据的公司的工具。 命令行用户界面使webXray易于非程序员使用,那些有高级需求的人可以使用正确的配置来分析数百万个页面。 webXray是专为学术研究而设计的专业工具,隐私合规官,监管人员以及对网络上的隐藏数据流充满好奇的人们可能会使用它。 webXray使用域所有权的自定义库来绘制从给定的第三方域到公司所有者以及母公司(如果适用)的数据流。 webXray生成的跟踪归因报告提供了可靠的粒度。 开箱即用的报告每个站点的第三方和cookie的平均数量,最常出现的第三方域和元素,传输的数据量,SSL加密的使用等报告。 灵活的数据模式允许生成自定义报告以及编写扩展以添加其他数据源。 webXray的公共版本使用Chrome加载页面

web前端常见开发工具汇总 你用过几个?

另一款名叫Hbuilder,这款IDE最吸引人的便是令人感到舒适的用户界面,试想在长期开发的工作压力下,生理心理方面都会有负面的反馈,这时一款美观的开发工具就显得尤为重要,不过相比之下,学长还是更喜欢vscode,各位感兴趣的小伙伴可以自行了解哦。这种方式的优点是成本低,入门门槛小,适合初学者进行一个浅层的理解与练习。第三个是中文汉化,vscode的汉化还是比较不错的,建议初学者都汉化一下,方便初始阶段的学习,当然资深开发者可以不装,毕竟外国的开发工具相似度很高,其实接触的时间长了,大部分英语很容易理解。

软工科班,擅长Matlab、C++、微信小程序开发 7435

提高效率!5个顶级网页开发工具助你事半功倍!

同时,它还可以作为设计师的图像编辑工具,提供实时布局引擎,让元素以类似AdobePS的呈现方式操作,最终通过编辑当前网页图片生成HTML模板和JS代码。拿网页设计来说,即时设计「资源广场」版块提供了近 400 种不同风格,不同用途的网页设计模板,不仅支持设计师免费使用,还支持设计师再次编辑,让网页设计无需从 0 开始,更快地实现网站的设计与制作。网页制作完成之后,设计师可以使用「插件广场」中的“Code.fun”工具将设计稿一键导出为前端代码,实现设计与开发并行,用更高的效率完成网站开发工作。

2301_79599164的博客 792

7个常用的前端开发工具(非常详细)零基础入门到精通,收藏这一篇就够了

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具,功能齐全,集成度高,内置服务器调试,ESlint,代码补全,Emmet,ES6语法支持等应有尽有,目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。也存在一定的缺点正版收费,由于内置集成度比较高占内存大(常驻内存300M左右),启动慢,对电脑配置有一定要求。

小陈的博客 5266

Web前端开发最常见的八种编程软件

1.Visual Studio Code(VS Code) 简介: Visual Studio Code(VS Code)是微软2015年推出的一个轻量但功能强大的源代码编辑器,基于 Electron 开发,支持 Windows、Linux 和 macOS 操作系统。它内置了对JavaScript,TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持,功能超级强大。Visual Studio Code是一款免费开源的现代化轻量级代码编辑...

m0_58447769的博客 6万+

2024年Web前端最新程序员必备开发工具(IDE)推荐,10年阿里开发架构师经验分享

在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。

2401_84447112的博客 2302

腾讯内部测试辅助工具:提升效率与质量

腾讯内部测试辅助工具被设计用于提高测试效率,加速软件开发周期。这些工具通过简化测试流程、管理测试用例、监控测试执行过程以及分析测试结果来辅助测试人员。它们的核心作用是确保软件质量的同时,缩短上市时间。

weixin_42578963的博客 922

VC开发辅助工具大收集

摘自:http://www.epubcn.org/read.php?tid=18281 开发辅助工具大收集  除了我们日常开发使用的Visual C++、Delphi、JBuilder等等大家伙, 还有很多小巧好用的开发辅助工具,善用它们可以极大的提高我们的效率。 日常工作中我主要使用Visual C++开发程序,工作几年,收集了一些小工具, 下面逐个介绍给大家。也希望大家把自己的工具拿出来和

SearchLife的专栏 2908

如何在WordPress中的页面上添加博客文章

大多数网站所有者使用的WordPress功能之一是博客帖子。 帖子是WordPress的基本功能,而帖子的产生是因为WordPress最初是一个博客平台。 即使您使用WordPress来运行主要不是博客的网站,也可能会在其中添加一些帖子。 这些可能是博客文章,新闻项目或更新。 您可能将它们完全用于其他目的:我有一位客户是职业教练,并在其网站上使用帖子作为面试技巧,而另一位客户是作者,并使用...

代码教主 6678

Java—— 一篇文章学会所有内部

包含内部类所有内容:什么是内部类。什么时候用内部类。内部类的访问特点。内部类的分类。成员内部类,编写成员内部类注意点,获取成员内部类对象的两种方式,成员内部类如何调用外部类的成员变量。静态内部类,注意事项,创建静态内部类对象的格式,如何调用静态内部类中的方法。局部内部类,注意事项,代码演示。匿名内部类,什么是匿名内部类,匿名内部类的格式,格式的细节,使用场景。

zjy_ccccc的博客 2257

php发表文章页面,WordPress主题开发: 制作文章页面single.php

single页面的制作来源于:可以调用的文章内容:调用文章标题:调用文章内容:调用文章摘要:调用作者姓名:调用文章发布时间:调用作者的Gravatar头像:调用文章内容可以写:但是这个wordpress会自动在段落上加上p,解决方法可以改为下面的写法$post=get_post(get_the_ID());echo $post->post_content;?>post_author:(...

weixin_28853079的博客 205

用Django全栈开发——17. 文章前端页面展示

大家好,这是皮爷给大家带来的最新的学习Python能干啥?之Django教程,从零开始,到最后成功部署上线的项目。这一节,我们将后端的数据在前端展示出来。 Peekpa.com的官方地址:http://peekpa.com 上两节,我们主要是针对后台的文章功能的开发,这一节,我们需要对前端文章的展示来做修改了。 前端文章页面回顾 在第12讲的时候,我们当时写了文章详情页的样子,张这个样子: 我们这一节的任务,就是讲文章的内容详细的在这个文章详情页里面展示出来。 后台数据填充 如果要展示文章,那么我们就先

皮克啪的铲屎官 956

一篇文章看懂java内部

内部类是将一个类定义在另一个类或方法里面的类,分为成员内部类、局部内部类、匿名内部类和静态内部类。

m0_72955988的博客 1998

微信小程序开发文章详情页面

微信小程序文章页面 具体代码在git上,欢迎下载分享。 git:https://github.com/gitqin8170/wechat_applet_article

weixin_45499080的博客 2448

如何通过 DeepSeek 开发一个简单的 AI 辅助工具

通过以上步骤,你可以快速将 DeepSeek 的强大 AI 能力集成到 VSCode 中,实现智能代码生成、优化和调试等功能,显著提升你的开发效率。不仅学会如何编程,还将学会如何将AI技术应用到实际问题中,为您的职业生涯增添一笔宝贵的财富。,让人能紧跟时代的浪潮。安装完成后,点击左侧机器人头像图标,即可看到 Cline 的界面。打开生成的代码文件,检查代码是否符合你的需求。你可以直接将生成的代码复制到你的项目中。

借雨醉东风的博客 1752

Halo 开源项目学习(四):发布文章页面

博客最基本的功能就是让作者能够自由发布自己的文章,分享自己观点,记录学习的过程。Halo 为用户提供了发布文章和展示自定义页面的功能,下面我们分析一下这些功能的实现过程。

weixin_68188085的博客 4252
上一篇: tomcat下的静态资源文件压缩
下一篇: Tomcat 启动失败问题 (作者proglife)
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值