前端代码调试:Webstorm调试js
【前言】
目前前端开发JavaScript的debug一般都是用chrome和firefox的开发者工具进行调试,浏览器工具使用不方便,webstorm支持了在代码上打断点,在编辑器里debug js代码。类似Java后台 Eclipse debug效果。接下来就给大家介绍如何安装webstorm和对webstorm进行配置调试代码。
【Webstorm下载与安装】
1.官网地址:https://www.jetbrains.com/webstorm/
2.选择下载的版本,点击download
3.点击安装即可
【代码调试方法】
1.安装chrome的插件
这一步需要翻墙,打开Chrome然后打开Web Stroe,搜索"jetbrains ide support",在Extensions中找到如图:
安装它,安装成功后Chrome的右上角应该出现扩展程序JetBranins IDE Support
的图标
二、在WebStorm中新建一个项目
三、新建debug配置项
点击右上角这个图标
新建一个JavaScript Debug
填写一个名字,随意起,选择URL,还有浏览器,这里浏览器当然选择Chrome,然后确定
四,开始调试程序
打断点
运行Debug模式
不出意外的话,应该会自动打开你的Chrome,并且有一行debug提示
WebStorm这边应该是已经断点,并且可以进行调试了
调试界面功能齐全,不比Chrome自带工具差,如果要调试element style只能在Chrome了。
五、其它说明
大部分项目都不是利用WebStorm内置的WebServer运行项目的,比如更多的是使用Tomcat、browser-sync
这类工具,因为API部分需要访问server-end,但也没有问题,假如你的项目启动后,访问地址为:localhost:3000,那么你在添加Debug的界面就要改成如下:
其它不变。右键JetBrains IDE Support这个插件,可以打开选项,界面非常简单
这个插件能够跟IDE通讯,其实是通过一个Host和Port链接IDE的,也就是WebStorm打开时已经自动启动一个Debuger Server,任何遵照它的协议连接上它即可实现IDE调试,我们打开IDE的属性,然后搜索Debugger,会发现这些配置信息,默认端口为63342
,你可以修改这个端口,一般情况下没必要修改,如飞防火墙或者其它程序占用了端口才会去修改它
其中有一项
Can accept external connections
这个选项默认未勾选,如果需要在其它电脑上访问IDE内置的WebServer,就要勾选这个选项,否则只允许127.0.0.1 or localhost
访问WebServer,当然,如果你的程序不依赖IDE的内置的WebServer那么这个选项也没必要勾选了。
最后大家可以动手试一试!
前端代码调试:Webstorm调试js相关推荐
- 使用 vscode 调试前端代码
使用 vscode 调试前端代码 今天我们以webpack项目为基础讲解配置 复制代码 1. 安装插件 Debugger for Chrome 2. 修改 config/index.js 将devto ...
- Google浏览器调试前端代码
我们在开发web程序时难免要自己编写前端的代码,而前端代码又涉及到很多细节,时不时就会犯下某个小错误,然后 特别不好发现错误,使得网页经常显示不出来.此时就体现出调试的重要性.下面我将结合图片为大家讲 ...
- linux 调试 js 代码,使用node-inspector调试NodeJS代码
任何一门完备的语言技术栈都少不了健壮的调试工具,对于NodeJS平台同样如此,笔者研究了几种调试NodeJS代码的方式,通过对比,还是觉得node-inspector的调试方式比较方便,而且和前端Ja ...
- 解决webstorm调试js时Evaluate脚本获取dom属性丢失问题
解决webstorm调试js时Evaluate脚本获取dom属性丢失问题,百思不得其解,最后找到,原因出在webstorm调用chrome调试接口时设置了一个"ownProperties&q ...
- 使用 chrome 调试被压缩的 js 代码
有时候我们会遇到一些网上的压缩js代码,由于被压缩的原因导致可读性很差,而且不利于打断点.此时我们就可以使用 chrome 自带的开发者工具对被压缩的脚本进行处理后进行调试.能够熟练使用各种浏览器中的 ...
- 在线html代码测试工具,CodePen - 一个在线的前端代码编辑工具(可用于制作测试页面、代码调试)...
有时我们需要调试一些前端代码(无论是 html.css,还是 js),或者要制作一个 demo 分享给他人.这些都可以借助 CodePen 这个网站来实现. 一.基本介绍 1,什么是 CodePen? ...
- VS2008 JS脚本调试总是调试旧代码 真不知道怎么回事?谁能帮帮我呀!
如图,[dynamic]标记的是调试的元文件 xml1.htm[dynamic]和xml.js[dynamic] 我更改后的文件是xml1.htm和xml.js,见图1 2 调试的文件有debugge ...
- 前端开发中的调试技巧
前端开发中的调试技巧 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主,浏览器脚本还只能为页面提供非常简单的辅助功能的时候.那个时候,网页主要运行在以IE6为主的浏览 ...
- 爬虫类Chrome去除前端无限debugger反调试(轻松分析算法)
实际问题与需求 想对网站进行爬虫操作或分析算法时,打开F12和往常不同的是,浏览器自动断点,导致无法正常分析js,如图可知,浏览debugger处于暂停状态,这是前端浏对非授权调试者在debug时造成 ...
最新文章
- matlab画复变函数,科学网—复数复变函数的Matlab计算与绘图 - 周铁戈的博文
- [转载]Eclipse.ini的相关说明
- html5 canvas 学习
- TCP/IP / 如何进行流量控制( flow control )?
- 混淆矩阵怎么看_道理我都懂,但是神经网络反向传播时的梯度到底怎么求?
- python 混淆矩阵_绘制混沌矩阵
- 三类基于贪心思想的区间覆盖问题
- adapter对象的更新操作
- 一文读懂前端与HTML5技术的区别!
- TensorFlow Lite发布重大更新!支持移动GPU、推断速度提升4-6倍
- visionpro加载toolblock 和保存toolblock
- 解决Mac osx AirPort: Link Down on en1. Reason 8 (Disassociated because station leaving)
- Codeforces 1009E Intercity Travelling 【期望】【概率】
- [LeetCode] Three Sum题解
- oracle 存储过程 实例 循环 给查询赋值 游标取值
- 上位机与下位机的串口通信实践
- php聊天室把数据存在缓存里,php聊天室信息存储的问题
- Java、JSP在线问卷调查系统
- 互联网早报:微信内测深度清理功能内存,可一键清理缓存
- jQuery02(达)
热门文章
- 影视剪辑,如何进行混剪,镜头流畅衔接
- i++与++i是什么意思?
- c语言中i++与++i的区别
- 蚂蚁金服2018CIKM中GEM算法《Heterogeneous Graph Neural Networks for Malicious Account Detection》
- 录音文件转换成文字的方法
- 【Linux4.1.12源码分析】协议栈gro收包之MAC层处理
- OpenAI-ChatGPT最新官方接口《审核机制》全网最详细中英文实用指南和教程,助你零基础快速轻松掌握全新技术(七)(附源码)
- Android权限说明
- veins车载通信仿真框架(3)--OMNET++基础
- 物联网毕业设计题目选题大全