Webstorm强大的定位功能,使用详解

Webstorm前端开发工具, 内置有强大的文件定位功能, 下面来看下具体怎么使用 。 操作方法 01 打开Webstorm, 并打开一个项目, 在一个html文件里, 我们可以看到有引入了一些js文件 。

Webstorm强大的定位功能,使用详解

文章插图

02 按住键盘上的command键(windows上, 应该是ctrl键), 然后鼠标移到这个脚本文件上时, 就会出现一个下划线, 点击鼠标左键 。

Webstorm强大的定位功能,使用详解

文章插图

03 点击后, 在编辑器上就会打开这个脚本文件了, 十分方便, 在项目文件多时, 不再需要逐层查找文件所在的地方了 。
(引入的css文件, 同样支持这样打开)

Webstorm强大的定位功能,使用详解

文章插图

04 在html文件上的js代码里, 通过点击调用的方法, 我们也可以定位到其所在的文件 。
同样是按住键盘上的command键, 然后点击这个add_some()方法 。

Webstorm强大的定位功能,使用详解

文章插图

05 点击后, 同样会打开定义该方法的文件, 还会具体定位到该方法所定义的行里, 如图, 该方法加上了浅浅的背景色 。

Webstorm强大的定位功能,使用详解

文章插图

06 除了脚本文件能定位得到, 我们的样式文件也同样能定义, 如图, 在一个元素的class里, 我们同样是按住键盘上的command键, 鼠标移动上去后, 就可以看到样式名会变颜色, 还有提示该样式所在的文件 。

Webstorm强大的定位功能,使用详解

文章插图

07 【Webstorm强大的定位功能,使用详解】鼠标点击左键, 则会打开该样式文件, 并者定位到具体的样式定义上 。

Webstorm强大的定位功能,使用详解

文章插图



以上内容就是Webstorm强大的定位功能, 使用详解的内容啦, 希望对你有所帮助哦!

    推荐阅读