☰

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.

当前为 2016-02-16 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Inspector&Editor
// @namespace    http://tampermonkey.net/
// @version      1.1.4
// @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.
// @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>");
$('body').append("<div id = 'inspect_box' style='position:fixed; z-index:1000000000000000000000; bottom:10px; right:20px; padding:0px 10px;'><textarea style='color:#fff !important; resize:none; width:500px; border-radius:3px; resize:vertical; overflow-y:scroll; background-color:rgba(50,50,50, 0.6) !important; font-size:13px; word-wrap:break-word;'></textarea></div>'");
var key = false;
var selected;
var map = [];
$('#inspect_box').hide();
var err_iter = 0;

$(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;}
    else setHeight();
});

$(document).mousemove(function(e){
    if (!key) return;
    else $('#inspect_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();
        $(selected).addClass('inspect_selector_');
    }
}).find('#inspect_box').mousemove(function(e){ if (key) return false;});

$('body').click(function(e){$('#inspect_box').hide(); $(selected).removeClass('inspect_selector_');}).find('#inspect_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];
        console.log(selected);
    }
    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 setHeight() {
    $('#inspect_box textarea').height(0);
    var newHeight = Math.min($('#inspect_box textarea')[0].scrollHeight, 400);
    $('#inspect_box textarea').height(newHeight);
}