深井冰_01
深井冰_01
  • 发布:2014-05-27 15:18
  • 更新:2022-11-03 16:49
  • 阅读:36108

转到定义 如何跳转追踪至CSS的class或JS的变量方法或HTML的id定义的地方?

分类:HBuilder

按住Alt+鼠标左键即可转到定义,快捷键是F12。
图示:

跳转后返回之前的光标位置,HBuilder是ctrl+q,HBuilderX是alt+left,也支持鼠标的后退键。

HBuilderX还支持ctrl+alt+鼠标左键,通过分栏打开新文档,这样可以并排查看。

HBuilder的跳转功能超过一般工具。
目前支持跳转的内容包括:

  1. js中定义的变量和函数。在引用变量或函数时,可以跳转到定义的位置,包括HTML中同文件内部跳转及HTML向js文件的跳转。
  2. css中定义的样式。在引用的class里可以跳转到对应的css定义处,包括HTML中同文件内部跳转及HTML向css文件的跳转。但目前还不支持选择器里.class写法的跳转。
  3. HTML中定义的元素id。在js里使用document.getElementById("div1"),这里的div1也是可以跳转的。但目前还不支持#id写法的跳转。
  4. 文件跳转。在HTML、js、css、图片、多媒体音视频等文件被引用等地方,可以直接跳转打开该文件。

几个注意:

  1. 使用alt而不使用ctrl,一是因为ctrl+鼠标左键是多光标和选相同词,有冲突,二来HBuilder的快捷键体系定义里,alt代表跳转。
  2. 文件要有引用关系才能跳转,比如HTML里引用了css文件或js文件,才能从HTML里跳转到css或js文件里
  3. 目前选择器里#id和.class写法的转到定义还不支持,后续升级会补充这些功能。
  4. 如果出现无法跳转的情况,有2种可能,一是项目刚建立,索引还没完成,需要等右下角的索引进度完成才能跳转;二是索引被某些操作破坏,此时需要对工程点右键-扫描索引-重新建立索引。
  5. 无论如何,单独文件直接打开而不创建项目是无法跳转的。
5 关注 分享
cike8899 飞鱼 南安 chobits4 rysnone

该文章目前已经被锁定, 无法添加新评论

DCloud_HB_WDL

DCloud_HB_WDL

回复 1***@qq.com :
请注意本帖时间。请单独开贴详细说明遇到的问题。
2022-11-03 16:49
1***@qq.com

1***@qq.com

回复 rysnone :
不可以诶,现在链接都不可以跳转了,链接的文件地址得ctrl+鼠标跳转,css就跳转不了到定义的css文件里
2022-11-03 16:16
rysnone

rysnone

更新后alt+鼠标左键,点击方法名跳不到定义处,选中项目点右键-重新构建项目索引,就可以了~赞
2022-03-18 10:42
DCloud_heavensoft

DCloud_heavensoft

回复 粽子zz :
支持的。用HBuilderX
2019-07-11 01:40
粽子zz

粽子zz

不支持跳转 vue里的方法,还是有些不大方便
2018-06-09 14:54
1***@qq.com

1***@qq.com

回复 深井冰_01 :
怎么在跳转回来啊??
2016-11-11 15:45
天马

天马

回复 深井冰_01 :
能不能做到想webstorm一样缓存项目中所有的css和js呢,这样就可以随意跳转了,没必要先引用再跳转
2016-09-14 11:20
天马

天马

webstorm对跳转支持的更好。HBuilder只有在当前页面引用了js或者css文件的情况下才可以alt+左键跳转,这样导致动态加载的js没有办法跳转,一个js文件中注入其他js的时候也没办法跳转到定义;webstorm的跳转只要js或者css文件在项目中就可以跳转,class类或者js的function可以不在本页面引用就可以顺利跳转。如果使用Angularjs作为前段框架的话,还是建议使用webstorm吧
2016-09-14 11:10
深井冰_01

深井冰_01 (作者)

回复 小湿父 :
两个js文件必须被同一个html引用过才可以判定是相关文件,进而才可以跳转过去。或者你加我qq 248590311 我断下看看啥情况
2016-08-01 17:16
小湿父

小湿父

如果出现无法跳转的情况,有2种可能,一是项目刚建立,索引还没完成,需要等右下角的索引进度完成才能跳转;二是索引被某些操作破坏,此时需要对工程点右键-扫描索引-重新建立索引。
都按上面的操作了,还是无法跳转到js定义的函数,已经导入了js,确定js中有该函数,就是无法跳转,下载的是最新的HBuilder 7.3.2.201607212211 版本。window7专业版,64位操作系统。
2016-07-30 19:59