web在线调试
xx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content=""> <title>HTML/CSS/JS 在线工具</title>
<meta name="keywords" content="HTML/CSS/JS 在线工具">
<meta name="description" content="通过 HTML/CSS/JS 在线工具，你可以在线输入 HTML 、CSS、JS 代码，该工具能实时显示运行效果。.."> <script src="https://cdn.staticfile.org/codemirror/5.25.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.25.0/codemirror.min.css">
<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/css/css.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/javascript/javascript.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/xml/xml.js"></script>
<link href="https://cdn.staticfile.org/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom Fonts -->
<link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
</head> <body> <div class="container"><link rel="stylesheet" href="https://static.runoob.com/assets/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://static.runoob.com/assets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://static.runoob.com/assets/jqwidgets/jqxsplitter.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/edit/closetag.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/edit/closebrackets.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/display/placeholder.js"></script> <style type="text/css"> .container{
width: 100%;
} .CodeMirror {
border: 0px solid #fff;
height: auto;
font-size: 14px;
line-height: 18px;
}
/*
.CodeMirror pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: keep-all;
}*/
table td {
word-wrap: break-word;
word-break: break-all;
}
.modal-dialog {
width: 800px;
}
#output {
width: 100%;
height: 100%;
}
#iframeResult {
display:block;
overflow:hidden;
border:0!important;
min-width:100px;
width:100%;
height:100%;
background-color:#fff
}
body{
background-color: transparent;
}
</style> <div class="row" style="padding-top:30px;" id="runoob-content">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<form class="form-inline"role="form"> <!-- <button type="button" class="btn btn-warning" id="librep">选择库</button>-->
<button type="button" class="btn btn-warning" id="basehtml">HTML 模板</button>
<div class="form-group">
<select class="form-control" id="sel1">
<option value="nourl" selected="selected">选择库...</option>
<option value="jq">使用 jQuery 2.2.4</option>
<option value="bs">使用 Bootstrap 3.3.7</option>
<option value="ag">使用 Angular 1.6.6</option>
<option value="vue">使用 Vue 2.2.2</option>
<option value="fa">使用 Font Awesome 4.7.0</option>
<option value="more">更多……</option>
</select>
<button type="button" class="btn btn-success" id="runcode">运行</button>
<label>
<input type="checkbox" id="isautorun">自动执行
</label>
</div> <div class="form-group alert alert-danger" style="display:none;padding: 6px;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <span> 错误！请进行一些更改。</span></div> </form> </div>
<div class="panel-body">
<form role="form" id="compiler-form">
<div id="splitContainer">
<div>
<div id="leftSplitter">
<div>
<textarea placeholder="输入 HTML 代码……" id="code-html" class="form-control" name="code" rows="11"></textarea>
<a href="javascript:void(0);" class="windowLabel" data-panel="js">
<span class="label">
HTML
</span>
<i class="fa fa-cog">
</i>
</a>
</div>
<div>
<textarea placeholder="输入 JavaScript 代码……" id="code-js" class="form-control" name="code" rows="10"></textarea>
<a href="javascript:void(0);" class="windowLabel" data-panel="js">
<span class="label">
JavaScript
</span>
<i class="fa fa-cog">
</i>
</a>
</div>
</div>
</div>
<div>
<div id="rightSplitter">
<div>
<textarea placeholder="输入 CSS 代码……" id="code-css" class="form-control" rows="11"></textarea>
<a href="javascript:void(0);" class="windowLabel" data-panel="js">
<span class="label">
CSS
</span>
<i class="fa fa-cog">
</i>
</a>
</div>
<div id="output">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
生成链接
</h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">标题</span>
<input type="text" id="post_title" class="form-control" placeholder="请输入标题……">
</div><br>
<div class="alert alert-warning">提示！对于发布的内容我们会定期审核，对于违规或错误代码会进行删除处理。</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-success" id="save">
保存代码
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div> <!-- 模态框（Modal）扩展库 -->
<div class="modal fade" id="libs" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
扩展库
</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="input-group">
<span class="input-group-addon">输入库名：</span>
<input type="text" class="form-control" id="filter" placeholder="搜索扩展库……">
</div>
<i id="fa-spinner" class="fa fa-spinner fa-pulse fa-3x fa-fw" style="display: none;padding: 10px;"></i>
<table id="libs-table" class="table table-striped"></table> </form>
</div> </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div> <script type="text/javascript">
$(document).ready(function () {
var winHeight=0;
if (window.innerHeight) {
winHeight = window.innerHeight;
} else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight) {
winHeight = document.documentElement.clientHeight;
}
$(".close").click(function(){
if(parent){
var iframe= parent.window.document.getElementsByTagName("iframe")[0];
if(iframe){
if(iframe.parentNode){
iframe.parentNode.removeChild(iframe)
}
}
}
});
$("#runcode").click(function() {
submitTryit();
}) ;
$("#isautorun").prop( "checked", true );
height = (winHeight - 60) * 0.86;
$('#splitContainer').jqxSplitter({ height: height, width: '100%', orientation: 'vertical', panels: [{ size: '50%' }, { size: '50%' }] });
$('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', panels: [{ size: '50%' }, { size: '50%'}] });
$('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', panels: [{ size: '50%' }, { size: '50%'}] });
});
// CM OPTIONS
var cm_opt = {
mode: 'text/html',
gutter: true,
lineNumbers: true,
autoCloseBrackets:true,
lineWrapping: true,
matchBrackets: true,
autoCloseTags:true
};
// HTML EDITOR
var html_box = document.querySelector('#code-html');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
//var isautorun = $('#isautorun').prop('checked');
html_editor.on('change',function (inst, changes) {
if($('#isautorun').prop('checked')) {
submitTryit();
} });
// CSS EDITOR
cm_opt.mode = 'css';
var css_box = document.querySelector('#code-css');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt); css_editor.on('change', function (inst, changes) {
if($('#isautorun').prop('checked')) {
submitTryit();
}
}); // JAVASCRIPT EDITOR
cm_opt.mode = 'javascript';
var js_box = document.querySelector('#code-js');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt); js_editor.on('change', function (inst, changes) {
if($('#isautorun').prop('checked')) {
submitTryit();
}
}); $("#basehtml").click(function() {
_html_code = ``;
html_editor.getDoc().setValue(_html_code);
}); $("#librep").click(function(){ $("#libs").modal("show"); });
$( "select" ).change(function() {
$( "select option:selected" ).each(function() {
_thisvar = $(this).val();
_inithtmlcode = html_editor.getValue();
if(_thisvar=='more'){
$("#libs").modal("show");
} else if(_thisvar == 'jq') {
_html_script_code = "<script src=\"https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js\"><\/script>\n";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}else if(_thisvar == 'bs') {
_html_script_code = "<link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\">\n<script src=\"https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js\"><\/script>\n<script src=\"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js\"><\/script>\n";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}else if(_thisvar == 'ag') {
_html_script_code = "<script src=\"https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js\"><\/script>\n";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}else if(_thisvar == 'vue') {
_html_script_code = "<script src=\"https://cdn.staticfile.org/vue/2.2.2/vue.min.js\"><\/script>\n";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}else if(_thisvar == 'fa') {
_html_script_code = "<link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css\">\n";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}
});
}); $('#libs').on('hidden.bs.modal', function () {
$("#sel1 option:first-child").attr('selected', true);
$("#sel1 option:last-child").attr('selected', false);
$("#libs-table tr").removeClass("success");
}) $("#filter").keyup(function() {
_search_value = $(this).val(); $.get('https://api.cdnjs.com/libraries',{search:_search_value},function(data) {
var _val_tr ='';
$("#fa-spinner").show();
$.each(data.results, function(i, item) {
if(i < 10) {
_val_tr += '<tr><td>'+item.name+' </td><td>'+item.latest+'</td><td> <i class="fa fa-paper-plane-o" aria-hidden="true"></i> </td></tr>';
} else {
return false;
};
});
if(_val_tr) {
$("#libs-table").html('<tr><th>库名</th><th>地址</th><th>插入</th></tr>' + _val_tr);
}
$("#fa-spinner").hide();
});
});
$( document ).ajaxComplete(function() {
$("tr").not(':first').hover(
function () {
if(!$(this).hasClass("success")) {
$(this).addClass("warning");
}
},
function () {
$(this).removeClass("warning");
}
);
$("tr").not(':first').click(function() {
if(!$(this).hasClass("success")) {
_editor_content = html_editor.getValue();
$(this).addClass("success")
$(this).removeClass("warning");
_libsrc = $(this).find("td").eq(1).text();
if(_editor_content.indexOf(_libsrc) !== -1 ) {
return;
}
if( _libsrc.indexOf('.js')!==-1 ){
_libsrc = '<script src="'+_libsrc+'"><\/script>\n';
} else if(_libsrc.indexOf('.css')!==-1) {
_libsrc = '<link rel="stylesheet" href="'+_libsrc+'">\n';
} patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
array_matches_body = patternBody.exec(_editor_content);
patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im;
array_matches_head = patternHead.exec(_editor_content); if(array_matches_head) {
_editor_content = _editor_content.replace('</head>', _libsrc + '</head>'); } else if(array_matches_body) {
_editor_content = _editor_content.replace('</body>', _libsrc + '</body>');
} else {
_editor_content = _libsrc + _editor_content;
}
html_editor.getDoc().setValue(_editor_content);
}
});
}); $("#save").click(function() {
post_title = $("#post_title").val().trim();
var isnum = /^\d+$/.test(post_title);
var isletter = /^[a-zA-Z]+$/.test(post_title);
if( isnum ) {
alert("请认真填写标题！");
} else if( isletter ) {
alert("加点中文描述，大家更容易理解！");
}else if(post_title=="" || post_title.length<6) {
alert("标题不能为空且不能少于6个字符……");
} else {
var htmlSource = html_editor.getValue(),
cssSource = css_editor.getValue(),
jsSource = js_editor.getValue(),
post_content = '';
if(htmlSource!='' || jsSource!='' || cssSource!='') {
$.post("/savecode.php", {post_title:post_title, html: htmlSource, js: jsSource, css:cssSource,filename: ""}, function(data){ if(data.errno) {
alert(data.msg)
} else {
$("#save").prop('disabled',false);
alert(data.msg)
window.location.href = data.url
} }, "json");
} else {
alert("请输入你要展示的代码……");
}
} });
html_editor.setSize('100%','100%');
js_editor.setSize('100%', '100%');
css_editor.setSize('100%','100%'); function submitTryit() {
// 基础模板 var html = html_editor.getValue(),
css = css_editor.getValue(),
js = js_editor.getValue(),
src = html;
if (html) {
var patternHtmlTag = /<html([^>]*)>/im;
var array_matches_html_tag = patternHtmlTag.exec(src);
if (array_matches_html_tag) {
src = src.replace('<html>', '<html ' + array_matches_html_tag[1] + '>');
}
var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
var array_matches_head = patternHead.exec(src); var patternBodyTag = /<body([^>]*)>/im;
var array_matches_body_tag = patternBodyTag.exec(src);
if (array_matches_body_tag) {
src = src.replace('<body>', '<body ' + array_matches_body_tag[1] + '>');
} }
//console.log(css);
if (css.indexOf('<style>') !== -1) {
$(".alert-danger span").text('CSS 编辑框不需要 <style> 标签');
$(".alert-danger").show().delay(5000).fadeOut();
return;
} else if (js.indexOf('<script>') !== -1) {
$(".alert-danger span").text('JavaScript 编辑框不需要 <script> 标签');
$(".alert-danger").show().delay(5000).fadeOut();
return;
} else {
$(".alert-danger").hide();
} // CSS
if(css) {
css = '<style>' + css + '</style>';
if (array_matches_head) {
src = src.replace('</head>', css + '</head>');
} else if (array_matches_body_tag) {
src = src.replace('</body>', css + '</body>');
} else {
src += css;
}
} // Javascript
if(js) {
js = '<script>' + js + '<\/script>';
if (array_matches_body_tag) {
src = src.replace('</body>', js + '</body>');
}else {
src += js;
}
} text = src;
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("output").innerHTML = "";
document.getElementById("output").appendChild(ifr); var ifrw = (ifr.contentWindow) ? ifr.contentWindow: (ifr.contentDocument.document) ? ifr.contentDocument.document: ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
autodivheight();
}
submitTryit();
window.addEventListener("resize", autodivheight);
function autodivheight(){
var winHeight=0;
if (window.innerHeight) {
winHeight = window.innerHeight;
} else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight) {
winHeight = document.documentElement.clientHeight;
}
height = height = (winHeight - 60) * 0.86;
document.getElementById("splitContainer").style.height= height +"px";
}
</script> </div> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
#iframe {
width: 100%;
height: -webkit-fill-available;
height: -moz-fill-available;
height: -moz-available;
height: fill-available;
}
#iframe.fullscreen{
position: fixed;
border:0px solid;
outline:9999px solid rgba(0,0,0,.6);
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
overflow:hidden;
z-index: 100;
background: #000000aa;
}
iframe {
width: 100%;
height: -webkit-fill-available;
height: -moz-fill-available;
height: -moz-available;
height: fill-available;
border: 0;
overflow: hidden;
margin-top: -44px;
}
#close {
background: #E91E63;
color: #eee;
text-shadow: 0 0 0;
border-radius: 12px;
line-height: 20px;
text-align: center;
height: 22px;
width: 22px;
padding: 1px;
margin-top: 22px;
margin-right: 6px;
position: relative;
float: right;
}
/* use cross as close button */
#close::before {
content: "\2756";
}
$(function(){
openIframe(hugo.iframes[0],$("#iframe")[0]);
$("#iframe").prepend("<button id='close'></button>")
$("#close").click(function(){
$("#iframe").toggleClass('fullscreen')
})
})
web在线调试的更多相关文章
- web开发在线调试
来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698754.html 通常我们开发web时候,使用ie的developertoolgs,或c ...
- 使用ASP.NET Web API Help Pages 创建在线接口文档
操作步骤 1.新建Web API项目 2.在项目Areas文件夹下找到以下文件,取消注释图中代码. 3.右键解决方案,属性,如图设置. 4.运行程序,点击右上角API 接口列表: 详情-无参数: 详情 ...
- 用web技术开发出原生的App应用的体会（1）
本人是是个前端小白,学前端已经有半年的时间了,前几天开了个博客,希望记录自己学习历程的点滴. 今天要写的是关于用html,css,javascript等web技术开发原生的app应用. 总所周知,we ...
- In-System Debugger for 8051 Devices（ISD 8051单片机在线调试器）
此文档包含了最新版本的说明及最近的更新特别是对 ISD51 的说明(用户手册没有此说明) Keil Software,Inc and Keil Elektronik GmbH保留所有此文件中涉及的信息 ...
- Web开发者的10个最好的云开发环境
1. Cloud9 IDE cloud9 Cloud9是我最喜欢的一个最好的云开发环境,它可以让我在任何时间任何地点进行代码编写.运行和调试.Cloud9对Node.js 和 JavaScript代码 ...
- 火狐开发----Web开发者工具
作为开发Web相关人员,有必要了解这个开发工具,会提供给你不少的帮助,进入正题.经典的F12启动,这个大家都知道. 一 控制台可以很好的帮我们掌控错误,包括文件的加载.JS语法.CSS语法.安全问题. ...
- 如何在spring-boot web项目中启用swagger
swagger的三个项目及其作用 我们打开swagger的官网,会发现有三个swagger相关的项目,它们分别是 swagger-editor 作用是通过写代码,生成文档描述(一个json文件或其他格 ...
- 25个Web前端开发工程师必看的国外大牛和酷站
逛了一周国外大牛们的博客与酷站,真是满满的钦佩.震撼.羡慕.惊喜………… Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要.无论是学习新技术,还是寻找免费资源与工具 ...
- 【转】手机web前端调试页面的几种方式
前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...
随机推荐
- 笨办法学Python（二十）
习题 20: 函数和文件 回忆一下函数的要点,然后一边做这节练习,一边注意一下函数和文件是如何在一起协作发挥作用的. from sys import argv script, input_file = ...
- ring0 暴力枚举进程
原理:遍历进程ID,然后openprocess,能打开的都枚举出来 ring0 : #include "EnumProcessByForce.h" extern char* PsG ...
- April 28 2017 Week 17 Friday
The only thing more painful than learning from experience is not learning from experience. 比从经验中学习更为 ...
- Linux 命令后台运行
写这个随笔主要是每次Deepin用shadowsocks的时候总需要命令行启动,然后一个终端就一直开着总是点错了就给关了. (不知道为什么我的Deepin的shadowsocks-qt5总是连接不上的 ...
- IOS 搜索条制作（UITextField 封装）
封装到 HMSearchBar.h / .m #import <UIKit/UIKit.h> @interface HMSearchBar : UITextField + (instanc ...
- Android（java）学习笔记65：Clock App 编写报错02
1. 首先之间看错误: 07-13 10:07:55.354: E/AndroidRuntime(8008): FATAL EXCEPTION: main 07-13 10:07:55.354: E/ ...
- CentOS下用rinetd做端口转发
windows下的端口转发一般用的是自带的nat和porttunnel.portmap linux下端口转发映射的程序叫rinetd,启动方法rinetd -c /etc/rinetd.conf , ...
- C++STL之vector向量容器
vector向量容器 vector向量容器不但能向数组一样对元素进行随机访问, 还能在尾部插入元素 vector具有内存自动管理的功能, 对于元素的插入和删除, 可动态调整所占的内存空间 vect ...
- 2017.9.20 HTML学习总结----下拉列表标签
接上: 1.下拉列表框<option>,<selcct> (1)解释:在表单中,通过option select标记可设计一个下拉式的列表或带有滚动条的列表, 用户可以在列表中选 ...
- 20145238 —《Java程序设计》—第5周学习总结
20145238 <Java程序设计>第5周学习总结 教材学习内容总结 第八章异常处理 8.1.1使用try.catch ·教材范例用户连续输入整数,输入0结束后显示输入数的平均值(代码如 ...