Syntax error: console output, line number.
Simple logic errors: logical judgment, logical judgment points, brackets. There is no {} after if, only the following sentence will be executed.
html tag matching
css: selector hierarchy, floating, positioning, compatibility
2. Breakpoint debugging, debugger. Tracking variable values, step by step, smoothing logic
Scope of application: Probably locate the scope of the error, not sure which code is wrong.
Interruption point method: Lock the entrance of the range, or before key variables are executed. If there are multiple ranges, they are at the entry breakpoint.
Debugging method: single step debugging.
1. Continue or terminate the procedure. Applicable to determine that the code between the breakpoint and the next breakpoint is okay.
2: Execute the current line, step by step.
3: Functions that enter the current line. There may be problems applying to the current function.
4: Jump out of the current function to exit the external file method. There may be no problem applying to the current function.
5: Add or delete breakpoints on the line where the cursor is located. Cooperate with the first four uses
6: Suspend the program and see where it is running. It is suitable for hanging programs.
3. Print the log to see if the object does not exist and what the value is.
Scope of use: Used when point debugging cannot be interrupted.
4. Continuous printing of logs, suitable for multi-threaded, complex logic, to see the sequence of code execution.
Scope of use: Can not interrupt point debugging use, single log can not judge or obtain worthwhile time.
Method: After adding simple logic judgment, the main logic is printed before and after the log.
Case 1:
$("document").ready(function () {
var flg = true;
var strPreClassName = ".p5_i";
var timeOuts = [];//Timer group
var iTimeCnt = 1;//Time coefficient, default 1
console.log($(".p5_bottom"));
var bgHeight;
var div = document.getElementsByClassName("s5")[0];
/*console.log("Bottom height "+$(". p5_bottom"). height ()"; after the program comes in, print the log to see the initial state
console.log("Screen height "+$(window). height ()";*/
// $(".s5").height(bgHeight);
if ($(".p5_bottom").height() && flg) {
bgHeight = $(window).height() - $(".p5_bottom").height();
$(".s5").height(bgHeight);
flg = false;
$(".test").text("Bottom Height 5+");
}
console.log("Display area height:" + $(".s5").height())
// Text ($(". test").text($(".p5_bottom").width()+ "bottom height"+ $(". p5_bottom").height()+ "screen height"+ $(window).height()+ "screen height"+ $(window).height()+ $(window).height());
/*if($(".p5_bottom").height() && flg){
$(".test").text("Bottom height 1 ";
flg=false;
}*/
hidelast();
/*if($(".p5_bottom").height() && flg){
$(".test").text("Bottom height 2 ";
flg=false;
}*/
showpic();
/*if($(".p5_bottom").height() && flg){
$(".test").text("Bottom height 3 ";
flg=false;
}*/
function showpic() {
var funTimer = function () {
if ($(".p5_bottom").height() && flg) {
bgHeight = $(window).height() - $(".p5_bottom").height();
$(".s5").height(bgHeight);
flg = false;
$(".test").text("Bottom Height 6+" + iTimeCnt);
}
/*if($(".p5_bottom").height() && flg){
$(".test").text("Bottom height 5 +"+iTime Cnt";
flg=false;
}*/
$(strPreClassName + iTimeCnt).show();//Display chat bubbles
$('.m3')[0].play();//Play sound
clearTimeout(timeOuts[iTimeCnt]);//Clear timer
/*if($(".p5_bottom").height() && flg){
$(".test").text("Bottom height 6 +"+iTime Cnt";
flg=false;
}*/
isSroll();
/*if($(".p5_bottom").height() && flg){
$(".test").text("Bottom height 7 +"+iTime Cnt";
flg=false;
}*/
iTimeCnt++;//Increase the time coefficient, corresponding to the timer
// Text ($(". test").text($(".p5_bottom").width()+ "bottom height"+ $(". p5_bottom").height()+ "screen height"+ $(window).height()+ "screen height"+ $(window).height()+ $(window).height());
};
for (var i = 1; i < 22; i++) {
timeOuts[i] = setTimeout(funTimer, i * 500);//set timer
/*if($(".p5_bottom").height() && flg){
$(".test").text("Bottom height 4 +"+i";
flg=false;
}*/
}
}
function hidelast() {//Hide all bubbles
$('.p5_i1,.p5_i2,.p5_i3,.p5_i4,.p5_i5,.p5_i6,.p5_i7,.p5_i8,.p5_i9,.p5_i10,.p5_i11,.p5_i12,.p5_i13,.p5_i14,.p5_i15,.p5_i16,.p5_i17,.p5_i18,.p5_i19,.p5_i20,.p5_i21,.ad').hide();
}
function isSroll() {
div.scrollTop = div.scrollHeight;//Set Scrollbar Scroll
}
});
Case description: 1.flg function: judging whether the log is printed or not, to ensure that the log is printed only once. For example, if you want to print three logs, set flg to int type, dispose of 0, add to 3.
2. Print log location: Mainly depend on the height. Print any code that affects the height before and after. Multithread prints separately, such as timers.
3. Log Content: To be able to distinguish the places where the log is printed.
5. Analytical Caching