AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Консоль JavaScript

Хотели бы вы иметь возможность работать с JavaScript консолью в любом веб броузере? Антон Теряев реализовал эту идею. Его консоль представляет собой динамически генерируемое перетаскиваемое окно, в которое можно вводить и выполнять программы JavaScript.

Я вынужден был изменить его код, т.к. столкнулся с проблеммой одинаковых имен функций и переменных. Кроме этого я изменил стили, добавил кнопку закрытия и функцию вывода всех свойств и методов объекта по имени тега: DOM('BR'), по id элемента: DOM('JSConsole'), по объекту: DOM(document.getElementById('JSConsole')).

Перетащите эту ссылку себе в закладки или на панель закладок, чтобы открывать окно отладки в любой момент и на любом сайте:
[JS консоль]

Также, вы можете скопировать себе консоль на диск, чтобы использовать при отсутствии подключения к интернету.

javascriptconsole.js
// Консоль JavaScript v2.0.
// Дмитрий Колесников KDG (http://kdg.htmlweb.ru/)
// Идея Антон Теряев (http://blogs.sun.com/ahot/entry/javascript_handy_js_console).
//
function JSCstartdrag(te) { //mouse down on dragged DIV element
    
if (e.preventDefaulte.preventDefault(); // IE compatibility
    
e.cancelBubble true;
    
window.document.onmousemoveOld window.document.onmousemove;
    
window.document.onmouseupOld window.document.onmouseup;
    
window.document.onmousemove=JSCdodrag;
    
window.document.onmouseup=JSCstopdrag;
    
window.document.draged t;
    
t.dragX e.clientX;
    
t.dragY e.clientY;
    return 
false;
}
function 
JSCdodrag(e) { //move the DIV
    
if (!eevent// IE compatibility
    
var window.document.draged;
    
t.style.left = (t.offsetLeft e.clientX t.dragX)+"px";
    
t.style.top = (t.offsetTop e.clientY t.dragY)+"px";
    
t.dragX e.clientX;
    
t.dragY e.clientY;
    return 
false;
}
function 
JSCstopdrag() {
   
window.document.onmousemove=window.document.onmousemoveOld;
   
window.document.onmouseup=window.document.onmouseupOld;
}
function 
WRITE(s) {
    
document.getElementById('JSCOutArea').innerHTML+= '<br>'+s.toString().replace(/n/g"<br>");
}
function 
JSCrun() {
    new Function(
"{n"+document.getElementById('JSCcode').value+"n}")();
    
document.getElementById('JSCOutArea').scrollTop document.getElementById('JSCOutArea').scrollHeight;
}
function 
JSCclear() {
    
document.getElementById('JSCOutArea').innerHTML "";
}
function 
JSCerror(err) {
    
document.getElementById('JSCOutArea').innerHTML += "<br><FONT color=red>"+err.replace("n""<br>")+"</FONT><br>";
    
document.getElementById('JSCOutArea').scrollTop document.getElementById('JSCOutArea').scrollHeight;
}
function 
JSCinit() {
    if (
document.getElementById('JSConsole') != null) {
        
document.body.removeChild(document.getElementById('JSConsole'));
        
window.onscroll null;
        
window.onerror null;
        return;
    }
     var 
s="<TABLE cellpadding=1 cellspacing=0 width=400px>";
    
s+="<TR><TD style='white-space:nowrap'>";
    
s+="<SPAN style='cursor:move;background:#bbccdd;color:black;border:1px solid black;font:11px courier new' onmousedown=JSCstartdrag(getElementById('JSConsole'),event)>&nbsp;JavaScript Console, Anton Teryaev 2008, KDG 2009&nbsp;</SPAN>";
    
s+="&nbsp;<span style='cursor:help;' onmousedown=JSChelp()>[?]</span>";
    
s+="&nbsp;<span style='cursor:pointer;' onmousedown=JSCinit()>[X]</span></TD></TR>";
    
s+="<TR><TD><DIV style='border:1px solid black;padding:0px'><TEXTAREA style='overflow:auto;padding:3px;width:390px;height:150px;font:11px;border:0px solid black' id=JSCcode>";
    
s+="i = document.getElementsByTagName('BR');n";
    
s+="WRITE('Найдено '+i.length+' элементов BR\n');";
    
s+="</TEXTAREA></DIV></TD></TR>";
    
s+="<TR><TD><INPUT TYPE=BUTTON VALUE='Выполнить' onclick=JSCrun() style='width:100px;background:#eeeeee;color:black;border:1px solid black;font:11px;cursor:pointer;'> ";
    
s+="<INPUT TYPE=BUTTON VALUE='Очистить' onclick=JSCclear() style='width:100px;background:#eeeeee;color:black;border:1px solid black;font:11px;cursor:pointer;'></TD></TR>";
    
s+="<TR><TD><DIV style='background:#eeeeee;overflow:auto;width:390px;height:150px;color:black;border:1px solid black;font:11px;padding:3px' id='JSCOutArea'>";
    
s+="<i>Область результатов вывода, используйте функцию<br><b>WRITE(string)</b>.<br>Для просмотра свойств объекта используйте<br><b>DOM(document.getElementById('JSConsole'))</b> или <br><b>DOM('id-объекта')</b> или<br><b>DOM('тег')</b>.</i>";
    
s+="</DIV></TD></TR></TABLE>";

    var 
sd document.createElement("DIV");
    
sd.style.position="absolute";
    
sd.style.background="white";
    
sd.style.border="1px solid black";
    
sd.style.fontSize="11px";
    
sd.style.lineHeight='15px';
    
sd.style.top = (document.documentElement.scrollTop+document.documentElement.clientHeight/2-180)+"px";
    
sd.style.left = (document.documentElement.scrollLeft+document.documentElement.clientWidth/2-200)+"px";
    
sd.id "JSConsole";
    
sd.innerHTML=s;

    
document.body.appendChild(sd);
    
window.onscroll JSCscroll;
    
window.onerror JSCerror;
}
function 
JSCscroll() {
    var 
md document.getElementById('JSConsole');
    if (
md.offsetTop document.documentElement.scrollTop+document.documentElement.clientHeight-350md.style.top = (document.documentElement.scrollTop+document.documentElement.clientHeight-350) + "px";
    if (
md.offsetTop document.documentElement.scrollTopmd.style.top document.documentElement.scrollTop "px";
    if (
md.offsetLeft document.documentElement.scrollLeftmd.style.left document.documentElement.scrollLeft "px";
}
function 
JSChelp(){
var 
jtop=window.open('http://htmlweb.ru/java/example/javascript_console.php','''height=768,width=1024,location=no,toolbar=no,directories=no,menubar=no,status=yes,scrollbars=1,resizable=yes');
jtop.focus();
jtop.name='example';
return 
false;
}
function 
DOM(s) {

if (
typeof(s)=="object") ;
else if ((
typeof(document.getElementsByTagName(s))=="object")&&(document.getElementsByTagName(s).length>0)) s=document.getElementsByTagName(s);
else if (
typeof(document.getElementById(s))=="object"s=document.getElementById(s);

if (
typeof(s)=="object") {
    var 
s;
    
"";
    for (var 
i in o){
/*@cc_on @*/
/*@if (@_jscript_version>4)
try
{@end @*/
                
JSCoi=o[i];
                if(
JSCoi)JSCoi=JSCoi.toString().replace(/</g"&lt;").replace(/>/g"&gt;");
        
+= "<b>"+i+"</b>="+JSCoi+"<br>n";
/*@if (@_jscript_version>4)
            }catch (err) {
            s += i+"="+err.description+"n";

            }
@end @*/
/*@cc_off @*/
        
}
    }
WRITE(s);
}
JSCinit();



Подборка полезных при отладке javascript скриптов

.

© Copyright 2008-2016 by KDG