美文网首页
浏览器html代码快速预览小工具

浏览器html代码快速预览小工具

作者: 关爱单身狗成长协会 | 来源:发表于2017-06-26 18:13 被阅读171次

我们常常在给简书或其他网站查看别人写的html代码时想快速预览下效果,一般都是在桌面创建个** .html*文件然后将网上的html代码复制粘贴进去,最后用浏览器打开预览。当然也有小伙伴喜欢用在线工具进行运行查看。今天我分享两个很简单的html效果预览工具

直接弹出预览:

javascript:(function() { 
    var blob = new Blob([window.getSelection().toString()],{type:"text/html"});   
    window.open(URL.createObjectURL(blob)); 
})()

快速保存到本地:

javascript: (function() {  
    var blob = new Blob([window.getSelection().toString()],{type:"text/html"});  
    var a=document.createElement("a");
    a.href=URL.createObjectURL(blob);
    a.download=document.title;
    a.click();
})()

使用教程:

在任意网页点击收藏:


在任意网页点击收藏

然后点击修改:


然后点击修改

输入收藏名称与网址,网址为以上或其他脚本:


输入收藏名称与网址,网址为以上或其他脚本

使用


使用

相关文章

网友评论

      本文标题:浏览器html代码快速预览小工具

      本文链接:https://www.haomeiwen.com/subject/rxpjcxtx.html