1.打开WebStorm的设置对话框,找到live edit选项,选中Enable live editing。
2.打开Chrome浏览器,进入Chrome网上商店,搜索JetBrains IDE Suport扩展程序。
或点击链接:https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji
3.装好后,无意重启了下编辑器, 发现以下报错
报错说的很明显 , 端口不可用 , 于是首先想到 , 那就改端口吧
右击浏览器右边的 图标 , 点击选项 , 修改端口 , 要与编辑器中的端口配置完全一致 , 图标是彩色的 , 说明已连接成功
4. 在编辑器中打开一个html页面 , 测试下效果吧
快捷键Alt+F2 , 打开浏览器选择浮动窗
浏览器中打开后 , 在编辑器中修改 , 发现浏览器没有任何变化 , 刷新多次无果之后 , 点击了下右键 , 发现
点击红框中选项后 , 页面发生了变化
ok , 这才是想要的效果 !
效果真是惊人啊 , 比DW看起来舒服多了 !