① 前端有哪些好用的调试工具
Postman
几乎所有前端应用程序都发送和接收JSON响应和请求。应用程序通过请求 API 可以做很多事情，例如身份验证，用户数据传输，甚至是一些简单的事情，例如获取所在位置的当前天气。
CSS Lint
你不仅可以使用CSS Lint工具验证代码，还可以使用它选择要测试的错误和警告。它执行基本的语法检查，并对代码应用一组规则，以查找有问题的模式或低效的迹象。
JSON格式和验证器
在未格式化的JSON中，很难发现语法错误或值不正确的键，因为它很难读取。当缩小的JSON文件中有缺行返回沙空格时，读取和发现错误可能很有挑战性。你需要能够快速扫描该对象并检查格式或内容中的错误。
Sentry
一旦你发布了你的应用程序，它将会运行在一系列的设备上。在任何软件开发生命周期中，测试阶段都是作为一个标准过程实现的。该阶段包括单元测试、系统测试、集成测试等。
JSHint
这是一个在JS代码中检测错误和潜在问题的工具,静态代码分析工具(如JSHint)可以帮助开发人员发现很难发现的问题。JSHint扫描一个用JavaScript编写的程序，并报告常见的错误和潜在的bug。潜在的问题可能是语法错误、隐式类型转换导致的错误、泄漏变量或其他完全的问题。
BrowserStack
BrowserStack是一组工具，可以帮助你模拟用户所经历错误的确切环境。设备+操作系统+浏览器是一个非常大的组合，这时这个工具的使用就显得十分必要了。辅助使用Sentry等错误记录工具，你可以充分发挥该工具的作用。
② 前端开发是怎么调试的
如果是网页开发的话呢 可以使用浏览器的f12 开发人员工具调试。如果是安卓或者ios呢可以抓包获取接口请求信息，或者使用日志输出来检测。
③ 前端开发工具有哪些
前端开发工具是开发必不可少的，现在的开发工具功能很强大，但是还是有一些不同，下面详细介绍一下，看看哪款适合你
HBuilder
HBuilder工具是支持一些html和js等开发，主要编写一些c和web等语言，最大的优势就是速度比较快，强大的代码提示和代码输入，大大增加了开发者的开发效率。
Sublime Text
编辑器里边支持emmet比较好的的唯一一款。多功能插件，还可以自定义键绑定，功能有很多，包括多选择和多窗口和python api等功能，为开发者提供了开发方便。
webstorm
js开发工具，web前端开发神器，功能十分强大，界面清晰，人性化设计，使用方便。
所有编辑器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款。
phpstorm
测试后端 API 接口时非常好用。GET、POST、DELETE、OPTIONS、PUT 这些方法都支持。
idea
phpstorm、idea包括所有webstorm的功能。只是phpstorm是针对phper的，idea是针对javaer，webstorm针对前端er。
Prettier Playground
代码格式化工具，支持格式化 JavaScript 代码，包括 [ES2017]、[JSX]、[Angular]、[Vue]、[Flow]、[TypeScript] 等。
IDE 大多支持 Prettier 工具， 也有在线版本，可以在浏览器里格式化代码。
Dreamweaver
Dreamweaver是一款网页代码编辑器，利用一些前端代码对网页进行快速的开发，可以通过智能搜索引擎对网页进行访问，开发者可以直观的开发减少出现的错误。
④ js前端调试的几个小技巧
1. debugger;
我以前也说过，你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。
需要带有条件的断点吗？你只需要用if语句包围它：
if(somethingHappens){
debugger;
}但要记住在程序发布前删掉它们。
2. 设置在DOM node发生变化时触发断点
有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很难找出问题的根源。
谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做“Break on…”，你在DOM节点上右键，就能看到这个菜单项。
断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化，或它的某个子节点有变化发生。
3. Ajax 断点
XHR断点，或Ajax断点，就像它们的名字一样，可以让我们设置一个断点，在特点的Ajax调用发生时触发它们。
当你在调试Web应用的网络传输时，这一招非常的有效。
tumblr_inline_n1s7ceQ08c1r2
4. 移动设备模拟环境
谷歌浏览器里有一些非常有趣的模拟移动设备的工具，帮助我们调试程序在移动设备里的运行情况。
找到它的方法是：按F12，调出开发者工具，然后按ESC键(当前tab不能是Console)，你就会看到第二层调试窗口出现，里面的Emulation标签页里有各种模拟设备可选。
当然，这不会就变成了真正的iPhone，只是模拟了iPhone的尺寸，触摸事件和浏览器User Agent值。
tumblr_inline_n1s71kb2NL1r2
5. 使用Audits改进你的网站
YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具，叫Audits。
它可快速的审计你的网站，给你提出非常实际有效的优化你的网站的建议和方法。
⑤ 前端开发一般用什么工具
1、Responsively App：网页调试必备法宝
2、D3.js：网红级数据可视化工具
3. CodePen：实现新创意代码
4、bit.dev：很棒的组件中心
5、Npkill：系统打扫型工具
⑥ Web前端开发需要哪些工具
前端开发中需要掌握最基础的技能就是HTML、CSS，JavaScript。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互，在进行开发前，需要对这些概念弄清楚，才能进行合理的开发。
在网页建设的过程中，为了避免代码的繁琐杂乱，更高效快速地完成任务，就会使用到一些有代码高亮提示和语法提示等便捷功能的前端开发工具。
1，Dreamweaver：中文名“梦想编织者”。是集网页制作和管理网站于一身的所见即所得网页代码编辑器。它可以使用所见即所得的接口，亦有HTML编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。 使用视觉辅助功能减少错误并提高网站开发速度。
2，Sublime：Sublime Text 是一个代码编辑器，也是HTML和散文先进的文本编辑器。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。
3，HBuilder：是DCloud,推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
有了工具，接下来还得靠我们人来操作。你必须熟悉三种语言，把这些概念弄明白，才能开发出好的作品。
⑦ web前端开发需要哪些工具
Web前端是一个新兴职业，市场需求大，薪资待遇高，吸引了很多人加入学习。无论是初学小白亦或是自身前端开发人员，好用的软件工具可以帮助他们更好的工作。今天千锋武汉给大家分享一下Web前端开发用什么软件。
1、Sublime Text
Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。
2、Dreamweaver
Adobe Dreamweaver使用所见即所得的接口，亦有HTML(标准通用标记语言下的一个应用)编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。 访问代码提示，即可快速了解 HTML、CSS 和其他Web标准。使用视觉辅助功能减少错误并提高网站开发速度。
3、Visual Studio Code
Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。
4、HBuilder
HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。
5、WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
想知道“Web前端开发用什么软件”，通过网上搜索你可以发现很多，而能否很好的借助这些软件完成项目，关键还要看你的技术。千锋武汉网站上有以上这些工具的安装包，需要的小伙伴自己去下载吧。
⑧ 前端怎么在chrome进行调试
打开Google浏览器，打开任意一个网页，这里以网络首页为例
按下F12键，能看到会弹出如下图所示的对话框
鼠标右键需要修改的地方
可以看到需要改动的地方，对应区域的CSS样式都在右侧区域显示
鼠标左键单击箭头所指区域，可添加所需的样式，并且可以实时的显示出来，当不需要时，去掉勾选即可，也可以直接按删除，制表符Tab可以自动补全属性名称
可以根据标签的id或者class值获取其属性，当提示undefined时，就需要查看是否存在这个标签值
下图显示的是进入网页所需的文件，同样的可以在里面直接修改，但不会保存到本地文件中
8
下面才是调试的重头戏，以12306购票网为例，按下F12，打开需要调试的JS文件，在行开头单击鼠标左键，打下断点，如下图所示。快捷键F11是进入下一步，shift+F11跳出进入下一步，F8跳到下一个断点，这样就可以看到每一步程序运行所显示的结果，此时可以用步骤6用到的方法来查看标签的属性
⑨ 前端用哪些常见的开发工具
Web前端是一个新兴职业，市场需求大，薪资待遇高，吸引了很多人加入学习。无论是初学小白亦或是自身前端开发人员，好用的软件工具可以帮助他们更好的工作。今天优就业给大家分享一下Web前端开发用什么软件。
1、Sublime Text
Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。
2、Dreamweaver
Adobe Dreamweaver使用所见即所得的接口，亦有HTML(标准通用标记语言下的一个应用)编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。 访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。使用视觉辅助功能减少错误并提高网站开发速度。
3、Visual Studio Code
Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。
4、HBuilder
HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。
5、WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
想知道“Web前端开发用什么软件”，通过网上搜索你可以发现很多，而能否很好的借助这些软件完成项目，关键还要看你的技术。
⑩ JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
浏览器开发者工具
我个人最喜欢Chrome开发者工具。虽然Safari和Firefox无法达到Chrome那么高的标准，但它们也在逐渐改善。在Firefox中，可以将Firebug和Firefox开发者工具组合使用。如果Firefox小组在改进内置开发者工具方面继续表现优异的话，Firebug有一天可能会被淘汰。
先把个人偏好放在一边，你应该能够在目标浏览器中对任意代码进行试验和调试。你的目标浏览器可能包括着名的IE8，也可能不包括。
要熟悉你自己选择的开发者工具。你还可以从IDE（集成开发环境）或者第三方软件获得额外的调试支持。
在各种调试工具中，调试的基础知识是相通的。事实上，我是在90年代从Borland的C开发者环境中学习的调试基础。断点、条件断点、监视与最新版Chrome开发者工具是完全相同的。2000年左右，我在Java中捕获到第一例异常。堆栈跟踪（Stack traces）的概念依然适用，即使JavaScript术语将其称作错误（Error），检查堆栈跟踪仍然和以前一样有用。
有些知识点是前端开发特有的。例如：
DOM检查
DOM断点
调试事件
内存泄露分析
断点
使用debugger语句可以在源代码中增加断点。一旦到达debugger语句，执行中断。当前作用域的上下文出现在控制台中，还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。
在代码中还可以创建条件断点：
JavaScript
if (condition) { debugger;}
还可以根据自己需要在开发者工具中插入断点和条件断点。在Chrome开发者工具中，在Sources视图中点击行号即可增加断点。如果在断点上点击右键并选择“编辑断点（Edit Breakpoint）”，你还可以增加断点条件。
节点变化的断点
如果你的任务是调试垃圾代码，你可能会有这样的问题：为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提供了一种方便的断点，可用来检测元素树中的节点变化。
在Elements视图中，右键点击一个元素，从右键菜单中选择“Break on…”。
节点变化的断点
DOM断点的类型可能包括：
选定节点树状子目录（sub-tree）中的节点变化，
选定节点的属性发生变化，
节点被删除。
避免记录引用类型
当记录对象或数组时，原始类型的值在引用对象记录中可能会发生变化。当查看引用类型时一定要记住，在记录和查看期间，代码执行可能会影响观测到的结果。
例如，在Chrome开发者工具中执行以下代码：
JavaScript
var wallets = [{ amount: 0 }];setInterval( function() { console.log( wallets, wallets[0], wallets[0].amount ); wallets[0].amount += 100;}, 1000 );
记录的第二个和第三个属性的值是正确的，第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时，amount域的值就已经确定了。无论你对同一个引用关闭并重新打开多少次，这个值都不会变化。
记录参考类型
永远记得你在记录什么。记录原始类型时，使用带断点的watch表达式。如果是异步代码，避免记录引用类型。
表格记录
在一些开发者工具中，你可以用console.table在控制台中记录对象数组。
尝试在你的Chrome开发者工具中执行下列代码：
JavaScript
console.table( [ { id: 1, name: 'John', address: 'Bay street 1' }, { id: 2, name: 'Jack', address: 'Valley road 2.' }, { id: 3, name: 'Jim', address: 'Hill street 3.' } ] );
输出是非常好看的表格。所有原始类型都立刻显示出来，它们的值反应记录时的状态。也可以记录复杂类型，显示内容为其类型，内容无法显示。因此，console.table只能用来显示具有原始类型值的对象构成的二维数据结构。
XHR断点
有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码，XHR断点可以帮你节省时间。当提交某一特殊类型的AJAX时，XHR断点将会终止代码的执行，并将提交请求的代码段呈现给用户。
在Chrome开发者工具的Sources标签页中，其中一个断点类型就是XHR断点。点击+图标，你可以输入URL片段，当AJAX请求的URL中出现这个URL片段时，JavaScript代码将会中断。
事件监听器断点
Chrome开发者工具可以捕获所有类型的事件，当用户按下一个键、点击一下鼠标时，可以对触发的事件进行调试。
异常时暂停
Chrome开发者工具可以在抛出异常时暂停执行JavaScript代码。这可以让你在Error对象被创建时观察应用的状态。
异常时暂停
代码片段
Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。
如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。这样的话，甚至还可以把你的调试技巧教给你的同事。
Paul Irish发布过一些基本的调试代码片段，例如在函数执行前插入断点。审查这些代码片段，并在网上搜索其他代码片段，这是很有价值的。
在函数执行前插入断点
如果你可以得到函数调用的源代码，你还可以在函数调用前插入断点来终止函数的执行。如果你想调试f函数，用debug(f)语句可以增加这种断点。
Unminify最小化代码
（译者注：unminify 解压缩并进行反混淆）
尽可能使用 source map。有时生产代码不能使用source map，但不管怎样，你都 不应该直接对生产代码进行调试。
（译者注：sourcemap 是针对压缩合并后的web代码进行调试的工具）
如果没有source map的话，你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）。格式化按钮{}位于源代码文本区域的下方。格式化按钮对源代码进行美化，并改变行号，这使得调试代码更加方便，堆栈跟踪更加有效。
格式化按钮只有在不得已时才会使用。从某种意义上来说，丑代码就是难看，因为代码中的命名没有明确的语义。
DOM元素的控制台书签
Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素，
$0 表示C元素
$1 表示B元素
$2 表示A元素
如果你又选择了元素D，那么$0、$1、$2和$3分别代表D、C、B和A。
访问调用栈
JavaScript
var f = function() { g(); } var g = function() { h(); }var h = function() { console.trace('trace in h'); }f();
Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。
性能审查
性能审查工具通常是很有用的。这些工具可以用于防止内存泄露，还可以检测到你的网站哪里需要优化。由于这些工具并不了解你的产品，你可以忽略其某些建议。通常来说，性能分析工具能够有效范围，可以使你的网站显着优化。
审查工具举例：
Chrome开发者工具的Audit标签页
YSlow
熟能生巧
你可能熟悉某些调试技巧，其他技巧也会帮你节省不少时间。如果你开始在实践中使用这些技巧，我建议你几周之后重新阅读本文。你将会惊奇地发现，你的关注点在几周内就发生了变化。
五个常用的js调试工具
JavaScript被称作以原型(prototype)为基础的语言。这种语言有很多特色，比如动态和弱类型，它还有一等函数（first class function）。另一个特点是它是一个多范型(multi-paradigm)语言，支持面向对象、声明式、函数式的编程风格。
JavaScript最初被用作客户端语言，浏览器实现它用来提供增强的用户接口。JavaScript在很多现代的网站和Web应用程序中都有应用。JavaScript的一个很棒的功能也很重要，就是我确实可以用它来提高或改善网站的用户体验。JavaScript也可以提供丰富的功能和交互的组件。
JavaScript在这技术高速发展的同时变得非常受欢迎。因为受欢迎JavaScript也改进了许多，修改JavaScript脚本有很多事要做。这次我们为开发者带来了几个非常有用的JavaScript调试工具。
1）Drosera
可以调试任何WebKit程序，不仅仅是Safari浏览器。
5)Venkman
Venkman是Mozilla的JavaScript调试器名称。它旨在为以Mozilla为基础的浏览器（Firefox, Netscape 7.x/9.x and SeaMonkey）提供一个强大的JavaScript调试环境。