☰

Inspector&Editor

This script makes your html programming easier and faster! Hold alt and move the mouse to inspect elements, shift+Enter to modify the element, click on everything to close the inspect box. To log something use the log() function in the console box; the inspected element is saved as javascript variable under the name of "selected", which can be used in the console box.

目前為 2016-02-17 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Inspector&Editor
// @namespace    http://tampermonkey.net/
// @version      1.2.1
// @description  This script makes your html programming easier and faster! Hold alt and move the mouse to inspect elements, shift+Enter to modify the element, click on everything to close the inspect box. To log something use the log() function in the console box; the inspected element is saved as javascript variable under the name of "selected", which can be used in the console box.
// @author       Speep [email protected]
// @match        */*
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==
/* jshint -W097 */
'use strict';

// Your code here...
$('head').append("<style> .inspect_selector_ { border: 1px solid black !important; background-color: rgba(0,100,255,0.2) !important; }</style>");

$('head').append("<style> .inspect_style_ { position:relative; padding:0px 10px; }</style>");
$('head').append("<style> .console_style_ { position:relative; padding:0px 10px; }</style>");
$('head').append("<style> .log_style_ { position:relative; padding:0px 10px; margin-bottom:5px; }</style>");

$('head').append("<style> .log_box_html { color:#fff !important; resize:none; width:504px; margin-left:1px; border-radius:3px; resize:vertical; font-size:13px; line-height:25px; word-wrap:break-word; }</style>");
$('head').append("<style> .console_box_textarea { color:#fff !important; resize:none; width:500px; border-radius:3px; resize:vertical; font-size:13px; word-wrap:break-word; }</style>");
$('head').append("<style> .inspect_box_textarea { color:#fff !important; resize:none; width:500px; border-radius:3px; resize:vertical; font-size:13px; word-wrap:break-word; }</style>");

$('head').append("<style> .box_container_ { position:fixed; bottom:10px; right:20px; z-index:1000000000000000000000; }</style>");

$('body').append("<div class='box_container_'></div>");

$('.box_container_').append("<div id = 'inspect_box' class='inspect_style_'><textarea class='inspect_box_textarea' style='background-color:rgba(50,50,50, 0.6) !important;'></textarea></div>");
$('.box_container_').append("<div id = 'log_box' class='log_style_'><xmp class='log_box_html' style='background-color:rgba(255,0,0, 0.5) !important;'></xmp></div>");
$('.box_container_').append("<div id = 'console_box' class='console_style_'><textarea class='console_box_textarea' placeholder='console' style='background-color:rgba(100,30,0, 0.6) !important;'></textarea></div>");

setHeight($('#console_box textarea'));

var key = false;
var selected;
var map = [];
$('#inspect_box, #log_box, #console_box').hide();
var err_iter = 0;
var hover_iter = 0;
var fadeTimeout;
var hover_interval;

$(document).keydown(function(e){
    if (e.which == 18) key = true;
});
$(document).keyup(function(e){
    key = false;
    if (e.which == 16 || e.which == 13) {
        map[e.keyCode] = e.type == 'keydown';
    }

});

$('#inspect_box textarea').keydown(function(e){
    if (e.which == 16 || e.which == 13) {
        map[e.keyCode] = e.type == 'keydown';
    }
    if (map[16] && map[13]) {setElement(); return false;}
}).keyup(function(e){setHeight($(this));});

$('#console_box textarea').keydown(function(e){
    if (e.which == 16 || e.which == 13) {
        map[e.keyCode] = e.type == 'keydown';
    }
    if (map[16] && map[13]) {evaluate($(this).val()); return false;}
}).keyup(function(e){setHeight($(this));});

$('#log_box').mouseover(function(){
    clearFadeTime();
    logHover('in', 0.80);
}).mouseleave(function(){
    fadeFunction();
    logHover('out', 0.50);
});


$(document).mousemove(function(e){
    if (!key) return;
    else $('#inspect_box, #console_box').show();
    var text = $(e.target).clone().html('').wrap('<div/>').parent().html();
    if (selected != e.target){
        $(selected).removeClass('inspect_selector_');
        selected = e.target;
        $('#inspect_box textarea').val(text);
        setHeight($('#inspect_box textarea'));
        $(selected).addClass('inspect_selector_');
    }
}).find('#inspect_box, #console_box, #log_box').mousemove(function(e){ if (key) return false;});

$('body').click(function(e){$('#inspect_box, #console_box').hide(); $(selected).removeClass('inspect_selector_');}).find('#inspect_box, #console_box, #log_box').click(function(e){return false;});

function setElement() {
    try {
        var html_content = $(selected).html();
        var new_element = $($('#inspect_box textarea').val());
        $(selected).replaceWith(new_element);
        selected = new_element[0];
        if (!$(new_element).html()) selected = (new_element.html(html_content))[0];
    }
    catch(e) {
        var interval = setInterval(function(){
            var red = Math.floor(50+Math.sin(err_iter)*50);
            var gb = Math.floor(50-Math.sin(err_iter)*50);
            var alpha = 0.6+Math.sin(err_iter)*0.15;
            $('#inspect_box textarea').css('background-color', 'rgba('+red+','+gb+','+gb+','+alpha+')');
            err_iter+=0.1;
            if (err_iter>3.14) {
                err_iter = 0;
                clearInterval(interval);
                $('#inspect_box textarea').css('background-color', 'rgba(50,50,50,0.6)');
            }
        },5);
    }
}

function evaluate(js_evaluation_inner_text) {
    try {
        eval(js_evaluation_inner_text);
        var new_text = $(selected).clone().html('').wrap('<div/>').parent().html();
        $('#inspect_box textarea').val(new_text);
        setHeight($('#inspect_box textarea'));
    }
    catch(e) {fadeFunction(e, 'err')}
}

function logHover(str, target) {

    clearInterval(hover_interval);
    var bgcolor = $('#log_box xmp').css('background-color');
    var std_alpha = Math.round(parseFloat(bgcolor.split(',')[3].replace(')','').trim())*100)/100;

    var sign = str=='in'? 1:-1;

    var str_bg = $('#log_box xmp').css('background-color').split(',')[0]
    +','+$('#log_box xmp').css('background-color').split(',')[1]
    +','+$('#log_box xmp').css('background-color').split(',')[2]+',';

    hover_interval = setInterval(function(){
        var alpha = Math.round(parseFloat(std_alpha + sign*Math.sin(hover_iter)*Math.abs(target - std_alpha))*100)/100;
        if (hover_iter >= 1.57) { $('#log_box xmp').css('background-color', str_bg+' '+target+')'); hover_iter = 0; clearInterval(hover_interval); }
        else {
            $('#log_box xmp').css('background-color', str_bg+' '+alpha+')');
            hover_iter+=0.05;
        }
    }, 5);

}

function fadeFunction(e_text, type) {
    if (type=='err') $('#log_box xmp').css('background-color', 'rgba(255,0,0,0.5');
    else if (type=='log') $('#log_box xmp').css('background-color', 'rgba(0,255,0,0.5');
    $('#log_box').fadeIn('fast').find('.log_box_html').html(e_text);
    clearFadeTime();
    fadeTimeout = setTimeout(function() {$('#log_box').fadeOut('fast')}, 2000);
}


function clearFadeTime() {
    clearTimeout(fadeTimeout);   
}

function log(text) {
    if (text instanceof HTMLElement || text[0] instanceof HTMLElement) {text = $(text).clone().html('').wrap('<div/>').parent().html();}
    else if (text == []) text = 'null';
    fadeFunction(text, 'log');
}

function setHeight(e) {
    e.height(0);
    var newHeight = Math.min(e[0].scrollHeight, 400);
    e.height(newHeight);
}