首页 > 编程知识 正文

简易js调试(JS在线调试)

时间:2023-12-22 19:14:05 阅读:319071 作者:DFRQ

本文目录一览:

如何调试JS?

说下几种方法吧:br1.用alert 这个最最直观 把你想要的内容弹出来给你看,但是要看哪里 就要在哪里加,比较麻烦br2.用firefox 或者chrome浏览器 里面有debug工具的br3.如果想用ie来debug的话 记得用ie8 或者以上版本

有哪些 JS 调试技巧

基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起。它的目的在于为调试、分析和开发 Node.js 应用程序提供一个简单的界面。

devtool 的详细介绍请参考:在 Chrome 开发者工具中调试 node.js,译者:sqrthree (根号三)

以下是我的使用体会:

虽然看起来和 Chrome 的 Developer Tools 没什么两样,但是如果只是一些小的 js 脚本,就不需要去写一个 html 网页再引用;

或者需要 node 环境运行的 js 文件,也不需要 WebStorm 这个庞大的 IDE;

相比 node-inspector,devtool 提供的调试功能更多,包括 Elements、Timeline、Profiles、Resources、Audit 这些面板,以及最新的 Chrome 开发者工具里带了的功能,比如 Workspace(分分钟变 IDE)、移动设备模拟、Promise inspector(Experiments),但是这些 node-inspector 都没有。

直接命令行下启动,替代 node 命令和在 Terminal 下没有交互的 console.log()

安装方法:

npm i -g devtool

安装过程会从 GitHub 下载 electron-prebuilt,而国内你懂的原因可能会下载失败,或者如果没耐心中断下载,用 devtool 的时候会报错。解决方法在最下面。

小技巧

另外启动调试可以用:

devtool path/to/file.js -w --break

这样可以监听文件变化自动 restart,以及在文件开头自动 break 以便打断点调试

—— Update 2016-03-09——

为 devtool 添加一个别名

alias dt='devtool -w --break'

—— Update 2016-06-12——

错误更新:

Error: ENOENT: no such file or directory, open '/usr/local/lib/node_modules/devtool/node_modules/electron-prebuilt/path.txt'

因为 npm 安装 devtool 会自动从 GitHub 下载,而如果安装的时候中断了,安装程序不会识别到,哪怕重新安装 devtool。这时候需要安装 electron-prebuilt:

npm i -g electron-prebuilt

或者用浏览器从 GitHub 下载对应版本(安装 electron-prebuilt 的时候会显示下载的 Electron 版本)::用浏览器下载一般会快很多

然后在 /usr/local/lib/node_modules/devtool/node_modules/electron-prebuilt/ 下创建 path.txt (Mac系统为例,其他系统要根据报错的路径来),内容为:

./dist/Electron.app/Contents/MacOS/Electron

以及 dist 文件夹,把下载下来的解压,Electron.app 放到 dist 里,就可以了。

—— Update 2016-06-21——

今天又遇到个问题 devtool 完全用不了了,这样解决了:

先卸载 devtool 和相关的 package:

npm uninstall -g devtool electron-prebuilt electron-packager

再安装 devtool:

npm i -g devtool

—— Update 2016-07-12——

发现 cnpm ( npm.taobao.org/mirrors,也就是俗称的淘宝镜像)已经收录了 electron 的二进制文件,这样就可以直接设置下载源即可,不用再去 GitHub 下载了(原理:electron-download/index.js at master · electron-userland/electron-download · GitHub)

方法1,环境变量:

ELECTRON_MIRROR= http://r.yuzhua.com

方法2,在 ~/.npmrc 里添加一行(如果是用的 cnpm ,要在 ~/.cnpmrc 里面添加):

ELECTRON_MIRROR=

然后再 npm i devtool -g,推荐方法2,一次设置以后都不会再出现下载失败的问题了

如何进行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请求,以下是页面打开后所有发起的请求。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。