首页 > 电脑专区 > 电脑教程 >

如何配置QQ浏览器在sublime text保存自动预览

来源:互联网 2023-02-21 22:27:25 版权归原作者所有,如有侵权,请联系我们

做web开发的时候,我们都喜欢在编辑器中 ctrl s 保存,然后切换到浏览器 f5 刷新显示编辑结果,虽然现在有很多可视化的编辑器,但是大家也都知道,有一句话叫“一切以浏览器为准”。DTd办公区 - 实用经验教程分享!

DTd办公区 - 实用经验教程分享!

但是,设每按一次 f5 用时 2 秒,相信一般情况下开发一个页面不少于 100 次预览吧?这 100 次加起来共用时 3.33 分钟,如果是一个项目,那得多大的文档?多少的页面?所以这 2 秒的时候大会在你编号一个项目中为你节约几个以上小时。DTd办公区 - 实用经验教程分享!

DTd办公区 - 实用经验教程分享!

而且,你不觉得这不只是节约时间的问题,还会显得酷酷的?小文现在就带你开始学习!DTd办公区 - 实用经验教程分享!

如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

工具/原料

  • QQBrowser 浏览器
  • sublime text 编辑器

方法/步骤

  • 1

    打开浏览器,点击如图 1 处右边的三横线,然后点击如图 2 处的“应用中心”;DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 1相关内容非法爬取自百度经验
  • 2

    在搜索框里输入 LiveReload 按回车键搜索;DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 3

    在得出的结果中如图 LiveReload ,点击“立即安装”DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 4

    点击安装之后插件栏和按钮位置会出现如图所示两个地方的提示,现在插件已经安装完成。我们需要再进入下了步,进行插件配置。DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 5

    点击“管理我的应用”进行应用配置界面。DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 6

    勾选 LiveReload 插件使其允许访问文件网址。DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 7

    现在我们开始配置 sublime text 编辑器,打开 sublime text ,按键 ctrl shift p,在弹出的输入框里输入 ip ,点击如图所示的选项安装 sublime text 插件。DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 8

    输入 livereload ,点击如图所示选项安装 livereload ,稍候弹出如下页面表示在 sublime text 编辑器 中安装 livereload 成功。DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 9

    依次选择菜单Preference(首选项)>Package Settings(插件设置)>LiveReload>Settings User(用户设置),粘贴以下配置之后 ctrl s 保存。DTd办公区 - 实用经验教程分享!

    {DTd办公区 - 实用经验教程分享!

    "enabled_plugins": [DTd办公区 - 实用经验教程分享!

    "SimpleReloadPlugin",DTd办公区 - 实用经验教程分享!

    "SimpleRefresh"DTd办公区 - 实用经验教程分享!

    ]DTd办公区 - 实用经验教程分享!

    }DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 10

    重启 sublime text 编辑器,点击浏览器中的 LiveReload 开始服务,如图。DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 11

    其图标中心的圆圈变实心,如图,服务开启,整个配置完成,赶快在编辑器中 ctrl s 试试吧,浏览器会实时显示新文档的呈现结果。DTd办公区 - 实用经验教程分享!

    如何配置QQ浏览器在sublime text保存自动预览DTd办公区 - 实用经验教程分享!

  • 注意事项

    • 经验中默认您已安装 sublime text 编辑器的插件管理器。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!DTd办公区 - 实用经验教程分享!


    标签: 浏览器电脑技术配置浏览保存

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号