Home > Developer > Web Develop
Today thick cheeky to recommend next I write a small plugin bar.
Read my blog should be familiar with this plugin, in fact, this is the goods.
This thing I wrote last year, when the level is not good, but somehow still realized the simple function.
Let me start with a brief introduction of this thing.
Because in the Forum, blog writing things, very much want to have a running function, of course, most of the current functions are open implementation.
And there was no console to debug under Ie6-7, so it was written when the brain was hot.
Perhaps you would say Firebug Lite is not very convenient, but also compatible with IE6 it.
Sure, but my starting point is not the same, just write a small plug-in that can be used to output console results.
At present, in the Deciduous Brothers Forum has undergone a year of baptism, there have been a variety of wonderful bugs, but also let me learn a lot.
One of the bugs that made me more memorable was the inability to use regular processing results.
Because the user debugs the regular time regexp.$1, Regexp.$_ and the like will have the value to exist.
These results are overwritten if the plug-in processes the results with regular processing.
For example, a simple explanation
"Aaaa123aaa". Match (/(\d+)/); Console.log (regexp.$1); 123
Click on the top right corner to see how it works.
If I use a regular when I'm working on the results, the $ $ is overwritten or lost.
There are a lot of questions like this and I really learned a lot.
Okay, no, go ahead and say plug-ins.
Everyone can go to my [email protected] Download "Easy Console Plugin"
Plug-in is very small, min after 4.58KB, pure JS write not still any library, compatible with modern browsers and ie6-11.
PS: My blog due to syntax highlighting plug-ins, so do not support ie6-8, to test ie6-11 friends can go to the Deciduous Brothers forum to see.
Please write the file call to the body tag and write it in the header error, because the DOM ready detection is not written.
And don't call him asynchronously because the script has a procedure that determines whether or not to hijack the console based on the parameters.
So for simplicity and security, call it directly within <body>.
<script type= "Text/javascript" src= "Simple-console.min.js" ></script>
If it is used in ie6-7 debugging, it is recommended to turn on hijack mode.
Global methods<script type= "Text/javascript" src= "Simple-console.min.js?rep" ></script>
In order to facilitate the use of blogs, forums and other places, the script deliberately provides a runjs method.
Runjs (' Alert (' Test. ') '); Runjs (' Console.log (' Test. ') '); Runjs (' Console.dir ({key: ' val '}) ');The level is limited, providing only a few simple and common interfaces to everyone.
alert (str); Display information Console.log (arg1 [, arg2 ...]); Information Console.dir (obj) that can display multiple parameters; If it is an object, expand Display Console.time (str); Test code run Time console.timeend (str); Test code run Time Console.error (str); Output error message (actually provided to the plugin itself) console.clear (); Empty display (actually provided to the plugin itself)
At present, the basic usage is the same as the original, but the function is not the original strong.
PS: About time, the use of timeend can refer to the "talk about = = and = = = Performance problems" or look at the official Google documents.
Next talk about how to call this plugin in your blog or forum.
var runit = { js:function (code, Istry) {//Run Js,istry whether to capture run-time error runjs (code, istry); }, html:function ( Code) {//Run HTML var newwin = window.open ("," _blank ","); Newwin.document.open (' text/html ', ' replace '); Newwin.opener = null; Newwin.document.write (code); Newwin.document.close (); }}This is my current online code, very simple.
Add a Run button to your syntax highlighting and then bind the event.
For example, this:
$ (". CodeBox"). On ("click", '. Cb-run ', function () { var className = this.classname, runtype = Classname.indexof (' HTML ') >-1? "HTML": "JS", istry = ~classname.indexof ("Notry"), code = $ (This). Partnet (). Find ("Pre"). Text (); Get the code text within the pre// or such /var code = $ (This). Partnet (). Data ("code"), or/////Highlight the source of the binding, more efficient than every time the text gets. Runit[runtype] (code, istry);//Run Codes});This is pretty much the core idea of my blog's running function.
Of course I did some other processing, because I used the syntax highlighting plugin is only the Highlight function, those buttons are all I added.
Well, today's share is almost all of these, if you do not understand the use of, or encountered a bug, you can leave a message, I will promptly deal with.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
