atom编辑器有显示HTMLDOM树的插件吗？（atom 编辑器）

有的

为何寻找

每次预览HTML页面,都需要打开各种浏览器; 哪怕不是调试,只是为了查看下效果; 切换来切换去,各种刷新,感觉有些浪费时间; 以前用过DW的实时预览,感觉这个功能很赞; 又踏上了atom插件仓库慢慢寻找之路…..

插件:atom-html-preview

官方描述:AlivepreviewtoolforAtomEditor.简言之:Atom编辑器内实时预览的工具

获取方式

1. 通过命令行安装
2. 通过编辑器内部的install搜索安装

使用方式及效果

快捷键

• 默认快捷键:CTRL+P调用,会和内置核心插件冲突(切换文件那个)—非常不好
• 修改版快捷键:CTRL+F12(感觉方便使用且没有冲突的快捷键)

• 1
• 2
• 3

• 1
• 2
• 3

Tips:写在keymap里面的权重是最高的….较新版本的atom内置了DevLiveReload这个插件;

这个插件的作用就是重新加载所有样式和规则,有点类似Linux的sourcexx.sh一样..即时生效调用快捷键是

当然,关闭atom再开atom编辑器也能达到重新加载所有样式规则的效果….

效果图

我用BS框架写的页面来测试….可以正确预览,内部css是cdn也能正确识别

浏览器猜测

跑到该插件的github仓库页面,只看到一些cson规则,,没有调用外部浏览器..

那么答案只有一个….就是chromium框架….所以内核应该也是blink以下是引用外部描述的atom[不知道是不是官方]

Web本地应用程序

Atom是一款基于Web技术的桌面应用程序，和其他桌面应用程序一样，它也拥有自己的图标、本地菜单、对话框以及访问整个文件系统的权限。

无论你是调整Atom的CSS接口还是添加一些HTML和JavaScript主要功能，它都可以被你轻松控制，并且使用起来非常方便。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！