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

我们常常在给或其他网站查看别人写的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代码快速预览小工具_第1张图片
在任意网页点击收藏

然后点击修改:


浏览器html代码快速预览小工具_第2张图片
然后点击修改

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


浏览器html代码快速预览小工具_第3张图片
输入收藏名称与网址,网址为以上或其他脚本

使用


浏览器html代码快速预览小工具_第4张图片
使用

你可能感兴趣的:(浏览器html代码快速预览小工具)