Javascript-log Tutorial

----------------------------------Development Background----------------------------------------------//
During JavaScript development, it is difficult to meet the needs of enterprise-level development If you always use alert to debug your programs.
For example, in an AJAX project, there is a 3000-line JS file with a variety of custom JavaScript objects.
In the process of development, it is always necessary to monitor the value or state of the custom object when the JS program executes to a certain key point.
Determine if the execution result is expected.
The alert approach has the following two obvious drawbacks:
1. If there are n key points in the implementation of the value of all want to be monitored at any time, the use of alert you are not enough n times to confirm,
-it is very incoherent and intuitive to the developer, and it is difficult to find the hidden problems smoothly.
2. Alert statements for debugging must be deleted at the time of release, and when it is necessary to debug again,
-You have to remember the key points before, plus alert, difficult debugging.

In view of the above requirements, in accordance with the principle of simple and practical, you have written this JavaScript debugging tools, all programs only about 10KB.
After using the tool, the above two problems become solved. You may find it convenient to debug JavaScript programs under IE.
The tool mainly has the following characteristics:
1. Full pluggable thinking has no negative effect on the target program.
2. The use of simple, convenient, just to introduce a line of JS code.

----------------------------------How to use---------------------------------------------//

Step 1: Add a line of script tags similar to the following to your target page (jsp,asp,html,php, etc.)

<script language=javascript src= "Debuginner.js" ></script>

A description of the script label parameters:
/**
-------------------------------------------
[String] @param--URL
-------------------------------------------
Add body.innerhtml to the TargetPage Div for the page to which the URL points
can be set when [initialize]

Cases:
Url= "Http://www.baidu.com"
Url= "Http://www.126.com"
Url= "http://www.sina.com.cn"
...
-------------------------------------------
[Boolean] @param--Debug
-------------------------------------------
Log function to control whether JavaScript is turned on
can be set when [initialize]

Cases:
Debug = True (DEFAULT)
debug = False

-------------------------------------------
[Boolean] @param--Showtime
-------------------------------------------
Used to control whether the current time is displayed before each log information
Either [Initialize] or [run time] can be set

Cases:
Showtime = False (DEFAULT)
Showtime = True

-------------------------------------------
[String] @param--Local
-------------------------------------------
Set the language of the interface
Either [Initialize] or [run time] can be set

Cases:
Local = "CN"
Local = "EN" (DEFAULT)

-------------------------------------------
[String] @param--src
-------------------------------------------
Set the path of the Debuginner.js
can be set when [initialize]

Cases:
src = "D:/jslog/debuginner.js"
src = ".. /javascriptlog-tool/debuginner.js "
src = "Http://localhost:8080/myproject/debugInner.js"
...
--------------------------------------------------
*/

Step 2. Test code is as follows:
<!--TEST begin-->
<script>
function Test () {
var head = document.getElementsByTagName (' head '). Item (0);
$Log. Loginfo (NULL, "Red");//null
$Log. Loginfo (1/3, "Red");//number
$Log. Loginfo (1==2, "Red");//boolean
$Log. Loginfo (Test, "Blue");//function
$Log. Loginfo ("Hello world!", "Red");//string
$Log. Loginfo (head);//object
}
</script>
<input type= "button" value= "TEST" >
<!--TEST end-->
When the project is large, it is necessary to keep some debugging information in the program and debug it when necessary.
So it's important to be able to print the information at the key point at any time, and make sure that after release,
Having no impact on the execution performance of the target script is a problem that must be considered.
The print interface provided by this tool is: Jslog (Msg,color);//msg: Information color: the colour of information
If release, you want to add "Step 2" to the target program in the script tag deletion, you can also
Choose to refactor a method similar to the following in your program, with a random name. For example:
function $out (message,color) {
$Log. Loginfo (Message,color);
}
It's also possible to unify your own definitions, such as:
function Test () {
$out (NULL, "Red");//null
$out (1/3, "Red");//number
$out (1==2, "Red");//boolean
$out (Test, "Blue");//function
$out ("Hello world!", "Red");//string
}
But usually release when the debug switch is set to: Debug=false, do not need to delete the target program in the debugging code, the target JS program performance without any impact; When you need to debug again, just set the debug switch to: Debug=true.

----------------------------------Latest Downloads---------------------------------------//
Download: Http://public.box.net/jzshmyt
----------------------------------Update Resume---------------------------------------//
Additional Instructions:
In 1.jslog, the internal events are managed uniformly.
-In beta, leave a test "cancel Event Registration" interface-by double-clicking the console you can call the
Description of the link above 2.console:
-[Mobile console]: You can move the console or change the width of the console
-[Increase height] [decrease height]: You can adjust the height of the console depending on your needs
-MaxHeight: Screen height, minheight:100px
-[Erase Info]: Clear the information in the console
-[Show/Hide moment]: The time to set whether or not to display the output log at run time
When a 3.document onscroll event occurs, it responds only if the console is not in the visible range.
4. Shortcut key [Ctrl+shift+s], then display the HTML code of the current active element in console
5. All functions of the tool are tested through IE only.

2008/02/14 Update:
1. Join the performance test component to support nested calls, and refer to the application in Example.htm
/* Performance Testing * *
$PF. Begin ();
$PF. End (Message,color);//default color is red
2. Code refactoring to handle repetitive loading related issues.

2008/04/01 Update:
Console folding

Technical Note:
1.javascript object-oriented Programming Idea, carries on the rigorous object encapsulation. Through the loose coupling design of the components, the pluggable of the components ($Log, $AJAXURL, $Performance) is realized.
2. The Advanced Deanedwards event model is used and enriched, encapsulating all internal events of the tool, making it possible to manage registered events (including anonymous events) uniformly.
3. Do not directly refer to the DOM elements in the closure function to avoid IE memory leaks. Repeated loading and so on.
4. Provides a way to implement multiple languages with client script.
5. In <script src=. ></script> tags, add custom parameters to make the script load parameters configurable. And dynamically load CSS at run time.
6. Building the _msgcached within the object ensures that even if the page is not initialized, log can be recorded correctly.
7. Console drag, console height control, information clearance, time output selection, scroll bar event processing, shortcut key to look at the activity element HTML, time format extension ....
8.Ajax Way URL site decoding component.
9. Client script performs performance test components.