Ale.js

Debug mode

Start

When you have a huge front-end system, debugging can become a nightmare if there is no way to monitor data changes.

The occurrence of the debug parameter solves this problem well. You can add the debug parameter to the component definition or render (the debug parameter when rendering will completely override the debug parameter set at the time of definition):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Added when defining */
Ale("test", {
/* ...... */
debug: {

}
})

/* Or add it dynamically when rendering */
Ale.render("test", {
/* ...... */
debug: {

}
})

The debug parameter has two built-in functions: setter and getter, which monitor the setting and getting of the component data respectively (where the setter and getter each require a parameter to receive the value):

1
2
3
4
5
6
7
8
9
10
11
Ale("test", {
/* ...... */
debug: {
setter: function(val){
console.log("You set me up as: "+val);
},
getter: function(val){
console.log("You got me: "+val);
}
}
})

Above example code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Ale("test", {
template: "Get or reset the value of app.data.data1 in the console, then view the output in the console",
debug: {
setter: function(val){
console.log("You set me up as: "+val);
},
getter: function(val){
console.log("You got me: "+val);
}
},
data: {
data1: "Hello"
}
})

Ale.render("test", {
el: "#app"
})

Found some errors? Edit on Github!