本文目录一览：
前端开发是怎么调试的
如果是网页开发的话呢 可以使用浏览器的f12 开发人员工具调试。如果是安卓或者ios呢可以抓包获取接口请求信息，或者使用日志输出来检测。
前端有哪些好用的调试工具
Postman
几乎所有前端应用程序都发送和接收JSON响应和请求。应用程序通过请求 API 可以做很多事情，例如身份验证，用户数据传输，甚至是一些简单的事情，例如获取所在位置的当前天气。
CSS Lint
你不仅可以使用CSS Lint工具验证代码，还可以使用它选择要测试的错误和警告。它执行基本的语法检查，并对代码应用一组规则，以查找有问题的模式或低效的迹象。
JSON格式和验证器
在未格式化的JSON中，很难发现语法错误或值不正确的键，因为它很难读取。当缩小的JSON文件中有缺行返回沙空格时，读取和发现错误可能很有挑战性。你需要能够快速扫描该对象并检查格式或内容中的错误。
Sentry
一旦你发布了你的应用程序，它将会运行在一系列的设备上。在任何软件开发生命周期中，测试阶段都是作为一个标准过程实现的。该阶段包括单元测试、系统测试、集成测试等。
JSHint
这是一个在JS代码中检测错误和潜在问题的工具,静态代码分析工具(如JSHint)可以帮助开发人员发现很难发现的问题。JSHint扫描一个用JavaScript编写的程序，并报告常见的错误和潜在的bug。潜在的问题可能是语法错误、隐式类型转换导致的错误、泄漏变量或其他完全的问题。
BrowserStack
BrowserStack是一组工具，可以帮助你模拟用户所经历错误的确切环境。设备+操作系统+浏览器是一个非常大的组合，这时这个工具的使用就显得十分必要了。辅助使用Sentry等错误记录工具，你可以充分发挥该工具的作用。
如何进行html调试和js脚本调试
工具/原料
chrome浏览器 Mozilla firefox 电脑
方法/步骤
1、以chrome为例，首先打开需要调试的页面，按F12快捷键打开调试工具。
2、选择指定的dom节点进行查看和编辑。
3、js断点调试：chrome非常强大，在chrome调试工具栏中，你可以进行js断点调试以及格式化查看（一些大型的门户网站都会将js压缩成无任何格式的代码这在研究时特别费劲）：我先写一段简单的js代码：function debug(){for (var i=0;i10;i++){alert(i);}调试截图如下：
4、js ajax调试，ajax技术如今越来越频繁使用，所以，ajax调试也必不可少：在chrome调试工具中，可以查看到当前页面所以的请求，包括ajax请求，以下是页面打开后所有发起的请求。
前端怎么在chrome进行调试
打开Google浏览器，打开任意一个网页，这里以百度首页为例
按下F12键，能看到会弹出如下图所示的对话框
鼠标右键需要修改的地方
可以看到需要改动的地方，对应区域的CSS样式都在右侧区域显示
鼠标左键单击箭头所指区域，可添加所需的样式，并且可以实时的显示出来，当不需要时，去掉勾选即可，也可以直接按删除，制表符Tab可以自动补全属性名称
可以根据标签的id或者class值获取其属性，当提示undefined时，就需要查看是否存在这个标签值
下图显示的是进入网页所需的文件，同样的可以在里面直接修改，但不会保存到本地文件中
8
下面才是调试的重头戏，以12306购票网为例，按下F12，打开需要调试的JS文件，在行开头单击鼠标左键，打下断点，如下图所示。快捷键F11是进入下一步，shift+F11跳出进入下一步，F8跳到下一个断点，这样就可以看到每一步程序运行所显示的结果，此时可以用步骤6用到的方法来查看标签的属性
一般程序员做前端代码开发时用什么工具写代码？
1、Bootstrap
Bootstrap是快速开发Web应用程序的bai前端工具包。它是一个CSS和HTML的集合，它使用了新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
2、蓝湖
蓝湖用于查看标注和切图下载非常方便
3、Cloud9IDE
Cloud9IDE是一个基于Node.JS构建的JavaScript程序开发WebIDE。它拥有一个非常快的文本编辑器，支持为JS，HTML，CSS和这几种的混合代码进行着色显示。Cloud9IDE还为node.js和GoogleChrome集成调试器，可以在IDE中启动、暂停和停止。
4、Notepad++
Notepad++是一款非常有特色的编辑器，是开源软件，可以免费使用。我们开发人员都是必备的。支持的语言:C,C++,Java,C#,XML,HTML,PHP,Javascript!
5、VisualStudioCode
VisualStudioCode是一个运行于OSX，Windows和Linux之上的，针对于编写现代web和云应用的跨平台编辑器。
6、GIMP
GIMP是GNU图像处理程序(GNUImageManipulationProgram)的缩写。包括几乎所有图象处理所需的功能，号称Linux下的PhotoShop。GIMP在Linux系统推出时就风靡了绘图爱好者圈。
7、SecureHeaders
SecureHeaders是Twitter送给Web开发者的一份大礼，作为一款Web安全开发工具，Secureheaders能够自动实施安全相关的header规则，包括内容安全政策(CSP)，防止XSS、HSTS等攻击，防止火绵羊(Firesheep)攻击以及XFO点击劫持等。
8、Fontello
Fontello是个图标字体生成器。这个工具允许用户把这些图标web字体放到自己的项目中。主要特性如下：缩小字形集合，减小字体大小;合并一些字体标记到单个文件中；访问大量专业级的开源图标。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/206389.html
微信扫一扫 
支付宝扫一扫 