javascript教程实例 JS将表单导出成EXCEL的实例代码?
JS将表单导出成EXCEL的实例代码?
复制代码代码如下:
lt!DOCTYPEhtmlPUBLIC
如何更优雅地调试Javascript?
从我的文章文件复制回来的,可以简单的看下(发图片不能复制不进来,抱歉)
引言
在我们的日常洗护开发中我们常常会遇上JavaScript的调试问题,而我们解决问题的现代解决方案应该是建议使用大量的console.log的或console对象的其他方法,这会给我们受到很多不便,特别是遇到了紧张问题的时候,肯定会会出现大量的console.log,当排查出问题之后我们又不得不在回过头清除掉这些调试信息,那样极大减少了我们的工作效率。所以,我们有必要收集要好的方案来解决JavaScript的调试问题,那绝对是,Chrome的调试工具ChromeDevTools给我们受到了调试的循环遍历,下面我们一步步地来去学习一遍在DevTools中软件调试的基本是工作流程!
不过在此之前:比较明确我们需要设置参数的位置
我们按照一节简单的案例来模拟一下,本案例来源于官网的调试Demo,其中代码如下
接着是index.js
代码的本意是要做一个简单点加法,只不过我们运行程序看下结果:
想来先执行结果是出错的,最终应该是是33,我们假设这那就是我们在开发中遇到的问题
第二步:可以打开Chrome的调试面板
CommandOptionI(Mac)或ControlShiftI(Windows、Linux)或者F12
再点击Source标签,Source有三块面板
从左排列是
FileNavigator窗格。此处列个页面请求的每个文件。
CodeEditor格子窗。在File Navigator窗格中你选择文件后,此处会会显示该文件的内容。
JavaScriptDebugging窗格。检查页面JavaScript的各种工具。要是DevTools窗口布局较宽,此窗格会没显示在CodeEditor窗格右侧。
建议使用断点不能正常代码
大多数我们会在这写console.log,打完断点我们在填上两个数字提交
我们的代码在断点处先暂停了,很很直观的能注意到我们要看的变量值,简单说来那就是断点这个可以快速更方便的查找值,有的时候我想隐式调试代码,直接F10就行了,想再次进入到函数中按F11,我们设置参数到这和我们推测的差不多,由于是字符串那就号就意味着什么再连接,也就倒致了错误的结果。
使用控制台直接求值
我如果说这是最真心赞一波的功能,因为我们可以然后在控制台输入输入变量也可以表达式或者执行一个分段函数,我们然后打开console标签,输入200元以内内容,前提是我们在之前那个地方打了断点
我们也可以先执行我们不需要不能执行的函数和表达式,然后再也正确的见到了最终,明白了的人很可能觉着没什么,可是还不知道的人肯定觉得这个功能的很good,或者你可以直接可以修改代码保存后在先执行,同时明白了了结果,而不必再到编辑器直接修改,调试正确后就剪切粘贴过去了即可
归纳
本文那是想简单的案例推荐来变动下我们民间的js调试,目的是就是为了提升工作效率,其实也有很多其它调试javascript,.例如WebStorm,VSCode安装好DebugwhileChrome,仅仅我感觉这种最基本,同样的也最简单,可是是小技巧,只不过也得很清楚并非,期望对大家还能够有了帮助!
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。