程序员经验分享-hwhale

前端代码调试：Webstorm调试js

2023-05-16

【前言】

目前前端开发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那么这个选项也没必要勾选了。

最后大家可以动手试一试！




本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端代码调试：Webstorm调试js 的相关文章

  • Spring官网下载SpringFramework

    说明 太惨了 xff0c 我发现我的SpringFramework是5 1 1的 xff0c 然后我的JDK是1 7的 xff0c 好像是JDK版本太低所以不能使用 xff0c 所以我决定下载一个新的SpringFramework 刚好记录

  • windows驱动程序开发基础

    1 用户态驱动驱动程序和核心态驱动程序 下图描绘出了操作系统驱动程序的相关组成部分的概貌 xff1a Windows驱动程序既可以运行在用户态也可以运行在核心模态 l 用户态的驱动程序运行在非特权处理机模式 xff08 nonprivile

  • java语言如何求平方根

    package javaapplication1 64 author Administrator public class JavaApplication1 64 param args the command line arguments

  • Maven 3.5.2 导致 IDEA 下载依赖卡死失败

    Maven 3 5 2 导致 IDEA 下载依赖卡死失败 当 IDEA 使用 Maven 3 5 2 时 xff0c 新增依赖 xff0c 点击 Reload All Maven Projects xff0c 总是卡在 finished 上

  • ubuntu16.04如何正确安装python3.6.5？

    目录 1 下载python3 6 5源码 2 编译python3 6 5源码 3 创建新安装的python3链接 4 检查python3 6 5是否可以用终端输入 前言 安装环境 xff1a ubuntu16 04 64位 xff0c py

  • 总结几点 Wake On Lan (WOL) 失败的原因

    正文 在我想使用 Wake On Lan xff08 后文皆用 WOL 代替 xff09 这项技术远程开机时 xff0c 总是失败 xff0c 在查阅各种资料后成功使用上了 WOL xff0c 下面总结几点导致失败的原因 发送 Magic

  • ubuntu18.04开机进入命令行模式

    ubuntu18 04开机进入命令行模式 设置开机进入命令行模式 1 首先我们修改grub文件sudo vim etc default grub 用 注释掉GRUB CMDLINE LINUX DEFAULT 61 quiet xff0c

  • 十几次CATIA安装重装系统吐血问题总结

    十几次CATIA安装重装系统吐血问题总结 一 CATIA许可证问题 破解文件未放置在相应位置 xff1b 安装时未关闭杀毒软件 二 CATIA热键未启动 xff0c 点击确定退出 查找杀毒软件恢复区 xff0c 检查是否杀毒软件限制了CAT

  • shell里面if条件语句使用正则判断

    下面介绍的是shell脚本里面 xff0c if语句中的正则表达式语句结构 要想判断变量最后一位是否为数字可用 34 0 9 34 这个表达式 xff0c 在 里面不要双引号

  • 如果在linux上明明服务已经启动，外部浏览器还是访问不到页面要注意以下问题。

    一 防火墙的状态 有时打开防火墙外部不能访问 防火墙的命令 xff1a 查看防火墙状态 systemctl status firewalld 开启防火墙 systemctl start firewalld 关闭防火墙 systemctl s

  • appium中常见的几种点击方式

    首先从appium库里面导入webdriver xff0c 然后webdriver Remote 声明driver对象 想要使用TouchAction xff0c 必须要创建TouchAction对象 xff0c 通过对象调用想要执行的手势

  • appium里的滑动和拖拽，滑动解锁，手机滑动接电话。

    1 滑动和拖拽 我们在做自动化测试的时候 xff0c 有些按钮是需要滑动几次屏幕后才会出现 xff0c 此时 xff0c 我们需要使用代码来模拟手指的滑动 xff0c 也就是接下来要学的滑动和拖拽了 1 1 swipe滑动事件 从一个坐标位

  • Flutter中http请求抓包的解决方案

    这篇文章主要给大家介绍了关于Flutter中http请求抓包的完美解决方案 xff0c 文中通过示例代码介绍的非常详细 xff0c 对大家的学习或者使用Flutter具有一定的参考学习价值 前言 前阵子有同学反馈Flutter中的http请

  • CSRF 攻击的应对之道

    CSRF 攻击的应对之道 牛 刚 和 童 强国 2011 年 2 月 24 日发布 CSRF 背景与介绍 CSRF xff08 Cross Site Request Forgery 跨站域请求伪造 xff09 是一种网络的攻击方式 xff0

  • py文件打包成exe可执行文件

    pyinstaller打包工具 官网 xff1a https pypi org project PyInstaller 一 安装命令 xff1a pip3 install pyinstaller 二 打包命令 xff08 首先打开cmd命令

  • 关于ffmpeg解码输出的YUV转RGB花屏问题

    现象 最近尝试基于ffmpeg封装一个dll 用于视频解码 然后将yuv转成RGB 用于在网页显示视频的画面 可是我将YUV转成RGB之后 发现花屏了 研究了很久 计算方式没有发现问题 代码如下 yuv420pToRGB24 pFrame

  • Docker 启动时报错：iptables:No chain/target/match by the name

    问题 xff1a jenkins的docker containner启动失败 xff0c 报错 xff1a failed programming external connectivity iptables No chain target

  • shell提示=不是有效字符

    提示 xff1a bash export 96 61 39 不是有效的标识符 原因 xff1a 61 左右不能有空格

  • 项目开发过程中什么是开发环境、测试环境、生产环境、UAT环境、仿真环境？

    项目开发过程中什么是开发环境 测试环境 生产环境 UAT环境 仿真环境 xff1f 最近在公司项目开发过程中总用到测试环境 xff0c 生产环境和UAT环境等 xff0c 然而我对环境什么的并不是很理解它的意思 xff0c 一直处于开发阶段

  • manifest.json不能随意删除

    create react app文件夹中的manifest json不能随意删除 xff0c 否则会报错 xff1a Manifest Line 1 column 1 Syntax error on Chrome browser 不小心误删

随机推荐

热门标签