将console.log的内容在页面上输出方便在移动设备上查看
来源:互联网 发布:自己开淘宝店做淘宝客 编辑:程序博客网 时间:2024/05/14 09:51
闲暇时所做的一个将console.log的内容在页面上输出的小玩意。
CSS
#info{ position: fixed; right: 0;top: 0;width: 20px;height: 20px;background:rgba(10,10,10,.8); overflow: scroll; font-size: 10px; z-index: 999; -webkit-tap-highlight-color: transparent; } #info h1{ color: green; word-wrap: break-word; white-space: pre; } #info h1:nth-child(odd){ background-color: rgba(0,0,0,.4); }
HTML
<div id="info" onClick="show();" type="0"></div>
JS
var infoConsole = document.getElementById('info'); if (infoConsole) { if (console) { var _console = { log:console.log } console.log = function(attr){ _console.log(attr); var str = JSON.stringify(attr, null, 4); var node = document.createElement("H1"); var textnode = document.createTextNode(str); node.appendChild(textnode); infoConsole.appendChild(node); } } function show(){ var type = infoConsole.getAttribute("type"); if (type === "0") { infoConsole.style.cssText = "width:100vw;height:40vh;"; infoConsole.setAttribute("type","1"); }else{ infoConsole.removeAttribute('style'); infoConsole.setAttribute("type","0"); } } }
请多指教。
阅读全文
0 0
- 将console.log的内容在页面上输出方便在移动设备上查看
- 修正页面在移动设备上的显示
- unity android设备上查看log输出
- unity android设备上查看log输出
- unity在移动设备上的优化
- 用http-server在移动设备上查看网页效果
- MySQL在console上输出中文乱码
- 扫描二维码在移动设备上浏览响应式页面
- 如何在PC上查看一个web页面在移动端的展示效果
- 在电脑上写好的移动端页面,如何在手机上快速查看
- java在html页面上正常输出xml文件内容
- 在本地调试移动设备上的页面——神器weinre介绍
- 在本地调试移动设备上的页面——神器weinre介绍
- 在本地调试移动设备上的页面——神器weinre介绍
- 将google搜索的内容显示在自己的页面上
- J2ME在移动设备上实现动画
- 在网页上启动移动设备APP
- unity在移动设备上打开相机
- 关于百度地图的整理
- spring基本原理概念
- AngularJS指令参数详解
- 需求:通过点击按钮,根据按钮的字找到图片
- 2017.8.22考试
- 将console.log的内容在页面上输出方便在移动设备上查看
- Ubuntu 16.04 使用burg修改开机引导主题
- 【leetcode】2.Add Two Numbers
- 事件的冒泡与捕获
- count
- Hibernate中get和load方法的区别
- Material Design整理(二)——SnackBar
- quota 操作
- 周赛4-Levko and Permutation