前言
很多时候大家可能会写手机页面，这时候的脚本调试就成为一个很大的问题了。。那么各位是怎么调试的？
一般来说，pc端的调试工作会简单很多，但是有时候你需要用到手机的特性，譬如，重力感应，譬如，多点触碰，这时候你要用真机来试，第二，不同手机可能有不同兼容问题，这时候还是要真机测试。所以啊，使用真机调试web脚本是必须要克服的。
想法
在手机端仿照chrome或者firefox的调试器，添加一个额外的控制台开关，专门用于输出各种调试信息及抓取错误。因为手机端很多时候没办法自由控制url地址【例如，微信】，所以采用url作为彩蛋来开启控制台的做法不可取【当然pc端可以】，但是手机支持各种手势，于是定制一个自定义手势作为彩蛋也是可以的。
设计
一般流程
具体流程
控制台本体功能
彩蛋相关功能
核心代码
样式
.wcmd-info-button{
position: fixed;
bottom: 5px;
right: 20px;
display: none;
width: 32px;
height: 32px;
background: url("images/Info_64.png") no-repeat center center;
background-size: 32px 32px;
opacity: 0;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
-ms-transition: opacity 2s;
-o-transition: opacity 2s;
transition: opacity 2s;
}
/**提醒层样式*/
.wcmd-info-layer{
position: fixed;
display: none;
bottom: 2px;
left: 0;
width: 100%;
line-height: 18px;
background: rgba(178,178,178,0.55);
opacity: 0;
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s,-moz-transform 1s;
-ms-transition: opacity 1s,-ms-transform 1s;
-o-transition: opacity 1s,-o-transform 1s;
transition: opacity 1s,transform 1s;
}
.wcmd-info-layer .wcmd-notice{
background: url("images/info_active_48.png") no-repeat left center;
background-size: 48px 48px;
padding-left: 50px;
color: rgba(255,255,255,0.8);
font-weight: bold;
letter-spacing: 1px;
line-height: 18px;
}
.wcmd-info-layer .wcmd-info-logo{
background: url("images/info_active_48.png") no-repeat left center;
background-size: 32px 32px;
width: 32px;
height: 100%;
float: left;
}
.wcmd-info-layer .wcmd-close-notice{
background: url("images/del_close_32.png") center center no-repeat;
border: 0;
display: block;
width: 32px;
height: 32px;
position: absolute;
right: 10px;
top: 8px;
}
.wcmd-info-layer .wcmd-notice-content{
white-space:normal;
}
/**点击文字以后的着重样式***/
.wcmd-info-layer .wcmd-selected-words{
background-color: #669933;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
animation:wcmd-words-animate 4s infinite;
padding: 3px;
-webkit-animation:wcmd-words-animate 4s infinite; /* Safari 和 Chrome */
text-decoration: none;
color:white;
}
.wcmd-info-layer .wcmd-notice-content a{
text-decoration: none;
letter-spacing: 2px;
color:white;
}
@keyframes wcmd-words-animate {
from{
opacity: 1;
}
25%{
opacity: 0.5;
}
50%{
opacity: 1;
}
75%{
opacity: 0.5;
}
to{
opacity: 1;
}
}
@-webkit-keyframes wcmd-words-animate {
from{
opacity: 1;
}
25%{
opacity: 0.5;
}
50%{
opacity: 1;
}
75%{
opacity: 0.5;
}
to{
opacity: 1;
}
}
/***接下来就是togglebutton了。***/
.wcmd-toggle-button{
position: fixed;
width: 32px;
height: 32px;
background: url("images/Terminal_cmd_64.png") center center no-repeat;
background-size: 32px 32px;
left: 25px;
top: 250px;
display: none;
opcacity:0;
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s,-moz-transform 1s;
-ms-transition: opacity 1s,-ms-transform 1s;
-o-transition: opacity 1s,-o-transform 1s;
transition: opacity 1s,transform 1s;
}
.wcmd-console{
width:100%;
position: fixed;
left: 0;
bottom: 0;
display: none;
opcacity:0;
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s,-moz-transform 1s;
-ms-transition: opacity 1s,-ms-transform 1s;
-o-transition: opacity 1s,-o-transform 1s;
transition: opacity 1s,transform 1s;
border-radius: 5px ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px ;
border:3px solid #dedede;
background: #ffffff;
}
.wcmd-console .wcmd-top-console-title{
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
background: rgba(16,98,56,0.4);
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
color: black;
clear: both;
}
.wcmd-console .wcmd-pre-commands{
float: left;
width: 40%;
height: 250px;
overflow-x: hidden;
overflow-y: scroll;
}
.wcmd-console .wcmd-log{
float: right;
width: 58%;
height: 250px;
overflow-x: hidden;
overflow-y: scroll;
}
.wcmd-console .wcmd-toolbar{
clear: both;
width: 100%;
line-height: 48px;
height: 48px;
text-align: center;
overflow-x: scroll;
overflow-y: hidden;
}
.wcmd-console .wcmd-toolbar a{
text-decoration: none;
color:black;
}
.wcmd-console .wcmd-toolbar .wcmd-icon-button{
background-size: 24px 24px;
padding-left: 28px;
line-height: 24px;
display: inline-block;
height: 24px;
font-size: 12px;
}
.wcmd-console .wcmd-toolbar .wcmd-min-window{
background: url("images/min-window-64.png") left center no-repeat;
background-size: 24px 24px;
}
.wcmd-console .wcmd-toolbar .wcmd-close-window{
background: url("images/close-window-32.png") left center no-repeat;
background-size: 24px 24px;
}
.wcmd-console .wcmd-toolbar .wcmd-restore-window{
background: url("images/restore-window-32.png") left center no-repeat;
background-size: 24px 24px;
}
.wcmd-console .wcmd-toolbar .wcmd-max-window{
background: url("images/max-window-32.png") left center no-repeat;
background-size: 24px 24px;
}
.wcmd-console .wcmd-toolbar .wcmd-refresh-window{
background: url("images/refresh_30.png") left center no-repeat;
background-size: 24px 24px;
}
.wcmd-console .wcmd-toolbar .wcmd-enlarge-window{
background: url("images/enlargeh_arrow_32.png") left center no-repeat;
background-size: 24px 24px;
}
.wcmd-console .wcmd-toolbar .wcmd-shrink-window{
background: url("images/shrinkh_arrow_32.png") left center no-repeat;
background-size: 24px 24px;
}
.wcmd-console .wcmd-toolbar .wcmd-clear-window{
background: url("images/eraser_32.png") left center no-repeat;
background-size: 24px 24px;
}
.wcmd-console .wcmd-log-tips{
padding-left: 20px;
line-height: 16px;
font-size:12px;
min-height: 16px;
}
.wcmd-console .wcmd-success-tips{
background: url("images/button_check_32.png") left top no-repeat;
background-size: 16px 16px;
color: #39a81f;
}
.wcmd-console .wcmd-info-tips{
background: url("images/button_info_32.png") left top no-repeat;
background-size: 16px 16px;
color: #0d457e;
}
.wcmd-console .wcmd-warning-tips{
background: url("images/sign_warning_32.png") left top no-repeat;
background-size: 16px 16px;
color: #97812b;
}
.wcmd-console .wcmd-error-tips{
background: url("images/sign_error_32.png") left top no-repeat;
background-size: 16px 16px;
color: #ff260b;
}
.wcmd-console .wcmd-custom-tips{
background: url("images/sign_sys_32.png") left top no-repeat;
background-size: 16px 16px;
color: #333;
}
/***下面开始对预设命令的排版***/
.wcmd-console .wcmd-pre-commands .wcmd-command-item{
background: url("images/command_line_32.png") 3px 5px no-repeat;
background-size: 16px 16px;
line-height: 16px;
font-size: 12px;
padding: 5px 5px;
padding-left: 21px;
}
.wcmd-console .wcmd-pre-commands .wcmd-command-item a{
text-decoration: none;
color: black;
}
.wcmd-console .wcmd-pre-commands .wcmd-command-item .wcmd-cmd-name{
padding: 0px 3px;
}
/**运行按钮样式。**/
.wcmd-console .wcmd-pre-commands .wcmd-command-item .wcmd-run-button {
background-color: #7fbf4d;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
background-image: linear-gradient(top, #7fbf4d, #63a62f);
border: 1px solid #63a62f;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
box-shadow: inset 0 1px 0 0 #96ca6d;
color: #fff;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 2px 5px 2px 5px;
text-align: center;
text-shadow: 0 -1px 0 #4c9021;
}
.wcmd-console .wcmd-pre-commands .wcmd-command-item .wcmd-run-button:hover {
background-color: #76b347;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
background-image: linear-gradient(top, #76b347, #5e9e2e);
-webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
box-shadow: inset 0 1px 0 0 #8dbf67;
cursor: pointer; }
.wcmd-console .wcmd-pre-commands .wcmd-command-item .wcmd-run-button:active {
border: 1px solid #5b992b;
border-bottom: 1px solid #538c27;
-webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; }脚本
;var WebConsoleTpl={
infoButton:[]
,notice:[]
,toggleButton:[]
,console:[]
};
WebConsoleTpl.infoButton.push("<a href=\"javascript:void(0);\" ui=\"web-console-info-btn\" class=\"wcmd-info-button\"></a>");
WebConsoleTpl.notice.push("<div ui=\"wcmd-notice\" class=\"wcmd-info-layer\"><div class=\"wcmd-notice\"><div ui=\"wcmd-notice-content\" class=\"wcmd-notice-content\">温馨小提示：长时间猛烈摇摆手机可能缩短设备的寿命。</div><a href=\"javascript:void(0);\" ui=\"btn-confirm-pwd\">我知道了</a></div><a href=\"javascript:void(0);\" ui=\"close-notice\" class=\"wcmd-close-notice\"></a> </div>");
WebConsoleTpl.toggleButton.push("<a href=\"javascript:void(0);\" ui=\"wcmd-toggle-button\" class=\"wcmd-toggle-button\"></a>");
WebConsoleTpl.console.push("<div ui=\"wcmd-console\" class=\"wcmd-console\">");
WebConsoleTpl.console.push(" <div class=\"wcmd-top-console-title\">移动端脚本调试器</div>");
WebConsoleTpl.console.push(" <div class=\"wcmd-pre-commands\" ui=\"wcmd-win-commands\">");
WebConsoleTpl.console.push(" <div class=\"wcmd-command-item\">");
WebConsoleTpl.console.push(" <span class=\"wcmd-cmd-name\" ui=\"wcmd-cmd-name\">命令-测试用</span><a href=\"javascript:WebConsole.log('hello world.','success');\" class=\"wcmd-run-button\" ui=\"wcmd-cmd-run\">执行</a>");
WebConsoleTpl.console.push(" </div>");
WebConsoleTpl.console.push(" </div>");
WebConsoleTpl.console.push(" <div class=\"wcmd-log\" ui=\"wcmd-win-logs\">");
WebConsoleTpl.console.push(" </div>");
WebConsoleTpl.console.push(" <div class=\"wcmd-toolbar\">");
WebConsoleTpl.console.push(" <a href=\"javascript:void(0)\" class=\"wcmd-icon-button wcmd-enlarge-window\" ui=\"wcmd-toggle-commands\">扩展</a>");
WebConsoleTpl.console.push(" <a href=\"javascript:void(0)\" class=\"wcmd-icon-button wcmd-restore-window\" ui=\"wcmd-restore-button\">还原</a>");
WebConsoleTpl.console.push(" <a href=\"javascript:void(0)\" class=\"wcmd-icon-button wcmd-max-window\" ui=\"wcmd-max-button\">最大化</a>");
WebConsoleTpl.console.push(" <a href=\"javascript:void(0)\" class=\"wcmd-icon-button wcmd-clear-window\" ui=\"wcmd-clear-window\">清空</a>");
WebConsoleTpl.console.push(" <a href=\"javascript:void(0)\" class=\"wcmd-icon-button wcmd-close-window\" ui=\"wcmd-close-button\">关闭</a>");
WebConsoleTpl.console.push(" <a href=\"javascript:void(0)\" class=\"wcmd-icon-button wcmd-refresh-window\" ui=\"wcmd-refresh-button\">刷新</a>");
WebConsoleTpl.console.push(" </div>");
WebConsoleTpl.console.push("</div>");
var WebConsole={
settings:{
tips:"温馨小提示：长时间猛烈摇摆手机可能缩短设备的寿命。"
,password:"猛烈摇摆"
,maxRecord:200 //控制台最多显示记录条数--100条。
}
,appData:{
logRecords:0 //打印的记录条数。
,currentLogIndex:1 //当前打印的记录条数，从1开始。
,hasInit:false //是否已经初始化。
}
,_exceptionQueue:[]
,_logQueue:[]
,_commandQueue:[]
,uiData:{
ui_info_button:""
,ui_notice:""
,ui_close_notice:""
,ui_confirm_pwd:""
,ui_notice_content:""
,ui_toggle_button:""
,ui_console:""
,ui_refresh_button:""
,ui_min_button:""
,ui_max_button:""
,ui_restore_button:""
,ui_clear_button:""
,ui_toggle_commands:""
,ui_win_commands:""
,ui_win_logs:""
}
//--当在没办法的情况下，譬如，dom都没有渲染出来要打印异常信息，那么用这个。
,_putIntoExceptionQueue:function(msg,scriptURI,lineNumber){
var me=this;
me._exceptionQueue.push({
message:msg,
script:scriptURI,
line:lineNumber
});
}
,_putIntoLogQueue:function(msg,msgType,styleObj){
var me=this;
me._logQueue.push({
msg:msg,
msgType:msgType,
styleObj:styleObj
});
}
,_putIntoCommandQueue:function(commandName,method,context){
var me=this;
me._commandQueue.push({
name:commandName,
method:method,
context:context
});
}
,__init:function(_opts){
var me=this;
$.extend(me.settings,_opts);
me.__initUI();
me.__initEvents();
me.appData.hasInit=true;
me._handleOthers();
}
//--
,_handleOthers:function(){
var me=this;
if(me._exceptionQueue.length>0){
for(var i=0;i<me._exceptionQueue.length;i++){
var _minfo=me._exceptionQueue[i];
me.printException(_minfo.message,_minfo.script,_minfo.line);
}
}
for(var i=0;i<me._logQueue.length;i++){
var info=me._logQueue[i];
me.log(info.msg,info.msgType,info.styleObj);
}
for(var i=0;i<me._commandQueue.length;i++){
var info=me._commandQueue[i];
me.registerCommand(info.name,info.method,info.context);
}
}
,setSettings:function(__opts){
var me=this;
$.extend(me.settings,__opts);
}
,__initUI:function(){
var me=this;
//var _html=WebConsoleTpl.join("");
//var _rootElement=$(_html);
//me.uiData.root=_rootElement;
me.uiData.ui_info_button=$(WebConsoleTpl.infoButton.join(""));
$(document.body).append(me.uiData.ui_info_button);
//me.uiData.root.find("[ui='web-console-info-btn']");
me.uiData.ui_notice=$(WebConsoleTpl.notice.join(""));
$(document.body).append(me.uiData.ui_notice);
//me.uiData.root.find('[ui="wcmd-notice"]');
me.uiData.ui_close_notice=me.uiData.ui_notice.find('[ui="close-notice"]');
me.uiData.ui_confirm_pwd=me.uiData.ui_notice.find('[ui="btn-confirm-pwd"]');
me.uiData.ui_notice_content=me.uiData.ui_notice.find('[ui="wcmd-notice-content"]');
me.uiData.ui_toggle_button=$(WebConsoleTpl.toggleButton.join(""));
$(document.body).append(me.uiData.ui_toggle_button);
//me.uiData.root.find('[ui="wcmd-toggle-button"]');
me.uiData.ui_console=$(WebConsoleTpl.console.join(""));
//me.uiData.root.find('[ui="wcmd-console"]');
$(document.body).append(me.uiData.ui_console);
me.uiData.ui_min_button=me.uiData.ui_console.find('[ui="wcmd-min-button"]');
me.uiData.ui_close_button=me.uiData.ui_console.find('[ui="wcmd-close-button"]');
me.uiData.ui_restore_button=me.uiData.ui_console.find('[ui="wcmd-restore-button"]');
me.uiData.ui_max_button=me.uiData.ui_console.find('[ui="wcmd-max-button"]');
me.uiData.ui_refresh_button=me.uiData.ui_console.find('[ui="wcmd-refresh-button"]');
me.uiData.ui_win_commands=me.uiData.ui_console.find('[ui="wcmd-win-commands"]');
me.uiData.ui_win_logs=me.uiData.ui_console.find('[ui="wcmd-win-logs"]');
me.uiData.ui_toggle_commands=me.uiData.ui_console.find('[ui="wcmd-toggle-commands"]');
me.uiData.ui_clear_button=me.uiData.ui_console.find('[ui="wcmd-clear-window"]');
//--初始化密码包含字段。
me.__initTips();
}
//--初始化密码提示字段。
,__initTips:function(){
var me=this;
me.uiData.ui_notice_content.empty();
for(var i=0;i<me.settings.tips.length;i++ ){
var word_item=me.settings.tips[i];
me.uiData.ui_notice_content.append('<a href="javascript:void(0);" ui="word-chooser">'+word_item+'</a>');
}
}
,__initEvents:function(){
var me=this;
var _click_info=false;
me.uiData.ui_info_button.click(function(){
if(_click_info==true){
return;
}
_click_info=true;
me.hideNoticeButton(function(){
_click_info=false;
});
me.showNotice();
});
me.uiData.ui_close_notice.click(function(){
me.hideNotice();
});
me.uiData.ui_confirm_pwd.click(function(){
var str_pwd=me.__getPwd();
if(str_pwd.length!=me.settings.password.length||me.settings.password.length<=0){
me.hideNotice();
return false;//没有答案不允许进入控制台。
}
else if(str_pwd==me.settings.password){
//--密码正确了。
me.hideNotice(function(){
});
me.showToggleButton();
}
});
me.uiData.ui_notice_content.find('[ui="word-chooser"]').click(function(){
var _attr_selected=$(this).attr("selected");
if(_attr_selected=="true"||_attr_selected){
$(this).removeClass("wcmd-selected-words").removeAttr("selected");
}
else{
$(this).addClass("wcmd-selected-words").attr("selected","true");
}
});
//--让控制台开关按钮可以随便移动。
me.uiData.ui_toggle_button[0].addEventListener("touchstart",function(event){
},false);
me.uiData.ui_toggle_button[0].addEventListener("touchmove",function(event){
event.preventDefault();
event.stopPropagation();
var e = event ? event : window.event;
var beginX=event.changedTouches[0].pageX;
var beginY=event.changedTouches[0].pageY;
var nowX = beginX, nowY = beginY;
nowX=nowX-15;
nowY=nowY-15;
me.uiData.ui_toggle_button.css({
"left":nowX+"px"
,"top":nowY+"px"
});
},false);
me.uiData.ui_toggle_button[0].addEventListener("touchend",function(event){
},false);
me.uiData.ui_toggle_button.click(function(){
me.showConsole();
me.hideToggleButtonRightNow(function(){
});
});
//--
me.uiData.ui_refresh_button.click(function(){
location.reload();
});
me.uiData.ui_min_button.click(function(){
me.hideConsole(function(){
me.showToggleButton();
});
});
me.uiData.ui_close_button.click(function(){
me.hideConsoleRightNow();
me.showToggleButton();
});
me.uiData.ui_restore_button.click(function(){
me.uiData.ui_win_commands.css({
height:"250px"
});
me.uiData.ui_win_logs.css({
height:"250px"
});
});
me.uiData.ui_max_button.click(function(){
var _win_height=$(window).height();
var _h=_win_height-90;
me.uiData.ui_win_commands.css({
height:_h+"px"
});
me.uiData.ui_win_logs.css({
height:_h+"px"
});
});
me.uiData.ui_toggle_commands.click(function(){
if($(this).hasClass("wcmd-enlarge-window")){
//$(this).text("收缩");
$(this).removeClass("wcmd-enlarge-window").addClass("wcmd-shrink-window").text("收缩");
me.uiData.ui_win_commands.hide();
me.uiData.ui_win_logs.css("width","100%");
}
else if($(this).hasClass("wcmd-shrink-window")){
//$(this).text("收缩");
$(this).removeClass("wcmd-shrink-window").addClass("wcmd-enlarge-window").text("扩展");
me.uiData.ui_win_logs.css("width","58%");
me.uiData.ui_win_commands.show();
}
});
me.uiData.ui_clear_button.click(function(){
me.clear();
});
}
//--获取当前用户选中答案。
,__getPwd:function(){
var me=this;
var _els=me.uiData.ui_notice_content.find('[ui="word-chooser"][selected]');
var _str=[];
for(var i=0;i<_els.length;i++){
_str.push($(_els[i]).text());
}
return _str.join("");
}
//--下面是对外接口。
,showNoticeButton:function(callback){
var me=this;
me.uiData.ui_info_button.css("display","block");
setTimeout(function(){
me.uiData.ui_info_button.css("opacity","1");
if(callback){
setTimeout(function(){
callback();
},2100);
}
},100);
}
,hideNoticeButton:function(callback){
var me=this;
me.uiData.ui_info_button.css("opacity","0");
setTimeout(function(){
me.uiData.ui_info_button.css("display","none");
if(callback){
callback();
}
},2100);
}
//--直接隐藏按钮。
,hideNoticeButtonRightNow:function(){
var me=this;
me.uiData.ui_info_button.css("display","none").css("opacity","0");
}
//--显示notice
,showNotice:function(callback){
var me=this;
me.uiData.ui_notice.css("display","block");
setTimeout(function(){
me.uiData.ui_notice.css("opacity","1");
if(callback){
setTimeout(function(){
callback();
},2100);
}
},20);
}
//--隐藏notice
,hideNotice:function(callback){
var me=this;
me.uiData.ui_notice.css("opacity","0");
setTimeout(function(){
me.uiData.ui_notice.css("display","none");
if(callback){
callback();
}
},2100);
}
//--这是正式的通知按钮动画。
,noticeButtonAnimation:function(showTime){
var me=this;
me.showNoticeButton(function(){
setTimeout(function(){
me.hideNoticeButton();
},showTime);
});
}
,showToggleButton:function(callback){
var me=this;
me.uiData.ui_toggle_button.css("display","block");
setTimeout(function(){
me.uiData.ui_toggle_button.css("opacity","1");
if(callback){
setTimeout(function(){
callback();
},1100);
}
},100);
}
,hideToggleButton:function(callback){
var me=this;
me.uiData.ui_toggle_button.css("opacity","0");
setTimeout(function(){
me.uiData.ui_toggle_button.css("display","none");
if(callback){
callback();
}
},1100);
}
,hideToggleButtonRightNow:function(){
var me=this;
me.uiData.ui_toggle_button.css("opacity","0").css("display","none");
}
//--显示控制台。
,showConsole:function(callback){
var me=this;
me.uiData.ui_console.css("display","block");
setTimeout(function(){
me.uiData.ui_console.css("opacity","1");
if(callback){
setTimeout(function(){
callback();
},1100);
}
},20);
}
,hideConsole:function(callback){
var me=this;
me.uiData.ui_console.css("opacity","0");
setTimeout(function(){
me.uiData.ui_console.css("display","none");
if(callback){
callback();
}
},1100);
}
,hideConsoleRightNow:function(){
var me=this;
me.uiData.ui_console.css("opacity","0").css("display","none");
}
/***在控制台打印消息。
* @param message 需要打印的消息。
* @param msgType 消息类型，默认为 info。总共有：info,success,error,warning
* ***/
,_appendConsoleItem:function(msg,msgType,styleObj){
//--计算目前已经有多少条信息了。
var me=this;
//--判断是否需要删除某些元素。
var _next_count=me.appData.logRecords+1;
if(_next_count>me.settings.maxRecord){
//$("ul li:lt(3)") 列出 index 小于 3 的元素
me.uiData.ui_win_logs.find('[ui="wcmd-log-item"]:lt('+(_next_count-me.appData.logRecords)+')').remove();
}
var _msgClass="wcmd-info-tips";
if(msgType){
switch(msgType) {
case "info":
break;
case "success":
_msgClass = "wcmd-success-tips";
break;
case "error":
_msgClass = "wcmd-error-tips";
break;
case "warning":
_msgClass = "wcmd-warning-tips";
break;
case "custom":
_msgClass="wcmd-custom-tips";
default:
_msgClass = "wcmd-info-tips";
break;
}
}
var _appendDIV='<div ui="wcmd-log-item" class="wcmd-log-tips '+_msgClass+'" ><p ui="wcmd-log-item-content"></p></div>';
var _div_el=$(_appendDIV);
if(styleObj){
_div_el.find('[ui="wcmd-log-item-content"]').css(styleObj);
}
var _realmsg="";
if(typeof(msg)=="string"&&msg.length>1000){
_realmsg=msg.substr("0,999")+"....内容太长，省略";
_div_el.find('[ui="wcmd-log-item-content"]').html(_realmsg);
}
else{_div_el.find('[ui="wcmd-log-item-content"]').html(msg);}
me.uiData.ui_win_logs.append(_div_el);
me.appData.logRecords++;
return _div_el;
}
//--其他对外接口。
/******
* 最常用的几个接口。
* *******/
/***在控制台打印消息。
* @param message 需要打印的消息。
* @param msgType 消息类型，默认为 info。总共有：info,success,error,warning
* ***/
,log:function(message,msgType){
//--计算目前已经有多少条信息了。
var me=this;
if(me.appData.hasInit){
me._appendConsoleItem(message,msgType);
}
else{
me._putIntoLogQueue(message,msgType);
}
}
/**
* 在控制台打印信息，
* @param message 打印的信息。
* @styleObj 自定义样式 譬如：{color:"red","font-weight":"bold"}这种。
* ***/
,customLog:function(message,styleObj){
//--计算目前已经有多少条信息了。
var me=this;
//--判断是否需要删除某些元素。
if(me.appData.hasInit){
me._appendConsoleItem(message,"custom",styleObj);
}
else{
me._putIntoLogQueue(message,"custom",styleObj);
}
}
/***
* 打印脚本出错信息。
* @param exceptionObj 脚本错误时候捕获的对象。当然假如传入string那么只能打印string了。
* ****/
,printException:function( errorMessage, scriptURI, lineNumber){
var me=this;
if(me.appData.hasInit){
var _div_msg=$("<div></div>").text(errorMessage);
var _div_uri=$("<div></div>").text(scriptURI);
var _div_lineNumber=$("<div></div>").text("脚本行号："+lineNumber);
var result_div=$("<div></div>");
result_div.append(_div_msg).append(_div_uri).append(_div_lineNumber);
me._appendConsoleItem(result_div,"error");
}
else{
me._putIntoExceptionQueue(errorMessage,scriptURI,lineNumber);
}
}
//--注册相关命令。
,registerCommand:function(cmdName,cmdMethod,context){
var me=this;
if(me.appData.hasInit==false){
me._putIntoCommandQueue(cmdName,cmdMethod,context);
return;
}
var _element=$('<div class="wcmd-command-item"><span class="wcmd-cmd-name" ui="wcmd-cmd-name"></span><a href="javascript:void(0);" class="wcmd-run-button" ui="wcmd-cmd-run">执行</a></div>');
_element.find('[ui="wcmd-cmd-name"]').text(cmdName);
_element.find('[ui="wcmd-cmd-run"]').click(function(){
if(cmdMethod){
cmdMethod();
}
});
me.uiData.ui_win_commands.append(_element);
}
,clear:function(){
var me=this;
me.appData.logRecords=0;
me.uiData.ui_win_logs.empty();
}
};
window.onerror =function(errorMessage, scriptURI, lineNumber) {
var erorMsg={
message: errorMessage,
script: scriptURI,
line: lineNumber
};
WebConsole.printException(errorMessage,scriptURI,lineNumber);
};
$(function() {
var _shakeNum = 0;
WebConsole.__init({});
var myShakeEvent = new Shake({
threshold: 15
});
myShakeEvent.start();
window.addEventListener('shake', function () {
_shakeNum++;
if (_shakeNum == 3 || _shakeNum == 5 || _shakeNum == 7 || _shakeNum == 9) {
WebConsole.noticeButtonAnimation(2500);
}
else if (_shakeNum > 7) {
}
}, false);
});html代码
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2015/9/22
Time: 11:29
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script src="/static/lib/jquery-1.11.0.min.js"></script>
<script src="/static/lib/jquery-migrate-1.2.1.js"></script>
<script src="/static/lib/shake.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="WebConsole.js"></script>
</head>
<body>
<script type="text/javascript">
/*
WebConsole.registerCommand("测试1",function(){
alert("测试一");
},null);
WebConsole.registerCommand("测试2",function(){
alert("测试2");
},null);
*/
//WebConsole.log("nihaoma?","error");
console.log(WebConsole.appData.hasInit);
try{
console.log("操作时间："+new Date());
WebConsole.log("nihaoma?","error");
WebConsole.registerCommand("测试1",function(){
alert("测试一");
},null);
WebConsole.registerCommand("测试2",function(){
alert("测试2");
},null);
}
catch (ex){
console.error(ex);
}
</script>
</body>
</html>
相关界面
输入密码
点击我知道了，然后出现了控制台的开关按钮。
下面是控制台的面貌
点击最大化
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
