前言
WebStorm是Jetbrains公司旗下一款JavaScript 开发工具，当你打开这款软件的时候会觉得特别的熟悉，因为它和itellj idea属于同款产品，界面和快捷键基本类似，而且功能非常强大，提示也非常智能，小编今天主要讲解其JavaScript的强大的debugger的功能！
内容
下载和破解WebStorm软件
Chrome plugins JetBrains IDE Support
- Chrome plugins JetBrains IDE Support2_0_7.crx
- JetBrains IDE Support2_0_9
不过新版一般都是被墙了，所以得翻墙去安装插件了。不懂的人可以直接安装蓝灯软件，很方便翻墙。
Chrome的插件配置
1.设置开发者模式：打开goole浏览器，选择更多工具——拓展程序，打开如何界面，将右上角的开发者模式打开：
2.拖入crx插件到浏览器：
3.修改crx调试接口：因为我当前项目的调试接口是4200，而crx默认接口是63343，接口需要保持一致;因为chrome的版本是66.0.3359.139，安装拓展程序点击程序的详细信息，然后选择拓展程序选项
打开之后选项界面之后，修改接口号：
Webstorm配置
1.添加Javascript debug配置：
2.配置页面的属性
3.npm start 启动Angular4项目
4.启动debugger的调试
5.调试界面
在页面直接显示结果值是不是很爽呀！
结语
工欲善其事，必先利其器；希望我们都可以高效利用工具，提高代码开发效率，本篇主要介绍了如何webstorm在chrome浏览器实现JavaScript的debugger的调试，如果你喜欢请点赞！