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

简介: 我们常常在给简书或其他网站查看别人写的html代码时想快速预览下效果,一般都是在桌面创建个** .html*文件然后将网上的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();
})()

使用教程:

在任意网页点击收藏:


img_bac736fa0c98147d5bab93bf7a69e01d.png
在任意网页点击收藏

然后点击修改:


img_ddf30948006e2ad451c4c42e439dabaf.png
然后点击修改

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


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

使用


img_53ad6e75350d005c05b635a7cc084899.png
使用
相关文章
|
1天前
|
人工智能 自然语言处理 API
Cline:29.7K Star!一文详解VSCode最强开源AI编程搭子:一键生成代码+自动跑终端+操控浏览器...
Cline 是一款集成于 VSCode 的 AI 编程助手,支持多语言模型,实时检查语法错误,帮助开发者提高编程效率。通过智能化手段,Cline 可以生成代码、执行终端命令、调试 Web 应用,并扩展更多功能。
63 5
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html实现的文字发散动画效果代码
html实现的文字发散动画效果代码
70 30
|
1月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
59 29
|
2月前
在线检测显示屏坏点html工具源码
在线检测显示屏坏点html工具源码
68 20
|
2月前
|
存储 人工智能 数据库
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具,支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中,具备自主操作能力,内置浏览器和文本编辑器,所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务,如创建项目结构、进行网络搜索等,适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
108 11
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
|
2月前
|
Web App开发 机器学习/深度学习 人工智能
Magic Copy:开源的 AI 抠图工具,在浏览器中自动识别图像进行抠图
Magic Copy 是一款开源的 AI 抠图工具,支持 Chrome 浏览器扩展。它基于 Meta 的 Segment Anything Model 技术,能够自动识别图像中的前景对象并提取出来,简化用户从图片中提取特定元素的过程,提高工作效率。
152 7
Magic Copy:开源的 AI 抠图工具,在浏览器中自动识别图像进行抠图
|
3月前
html实现的破碎拼接文字动画特效代码
html实现的破碎拼接文字动画特效代码是一段会自动产生文字依次破碎再拼接的效果,非常的炫。欢迎对此段代码感兴趣的朋友前来下载使用。
54 1
|
3月前
|
移动开发 前端开发 JavaScript
HTML5 浏览器支持1
现代浏览器普遍支持HTML5,但早期浏览器可能不支持。可以通过将HTML5元素定义为块级元素,使旧版浏览器也能正确显示。例如,可以使用CSS将header、section等8个新的HTML5语义元素设置为块级元素。此外,还可以通过JavaScript为HTML添加新的自定义元素,如使用`document.createElement("myHero")`为IE浏览器添加新元素。

热门文章

最新文章