How to debug streamed JavaScript?
Added by Plug Gulp about 12 years ago
Hello,
I am studying how to write custom validators. And I was successful in implementing and using it in my test app. But I am now wondering about the following:
1. How do I debug the validator's JavaScript that is streamed to the client i.e. the script implemented in {XYZ}Validator.js file? I used Firefox Web Developer Tools to peek at the JavaScript when the Wt app was launched, but I did not see the JavaScript code corresponding to the validator I implemented. How do I put a break point on the JavaScript function of the validator?
2. (Possibly this question will be moot if I get answer to the above question) How do I verify that the validator is doing client-side validation (javaScriptValidate) or server-side validation (validate)?
3. Is there a way to add multiple validators to a widget e.g. RegExp + Length validators or RegExp + Length + Custom validators? That will make it easier to use the various validators in different combinations.
Thanks and regards,
~Plug
Replies (9)
RE: How to debug streamed JavaScript? - Added by Koen Deforche about 12 years ago
Hey,
1. How did you implement the JS ? If you put it in a JS file, you need to app->require() it. You can easily debug it by putting a 'debugger' JavaScript statement in there.
(within the library itself we take a bit a different way of including the JS in the application)
2. Put 'debugger' or 'console.log()' statements in JS, put a debugger break point in your C code
3. That's not readily possible. You could probably create a generic validator that combines other validators, which combines them both in JS and in C; I can't see any big problems there.
Regards,
koen
RE: How to debug streamed JavaScript? - Added by Plug Gulp about 12 years ago
"How did you implement the JS ?"
I am following the implementation of other validators within the library. I am attaching my test code.
@Koen Deforche
"Put 'debugger' or 'console.log()' statements in JS"
Thanks! I will do that.
@Koen Deforche
"...create a generic validator that combines other validators, which combines them both in JS and in C"
And thats what I was trying to avoid: having to combine JS manually. BTW, how do I do that genericly (note that I am not a JavaScript person so I might have missed something)?
What will the validate and javaScriptValidate look like...something like the following? :
<code class="cpp">
WValidator::Result MultiValidators::validate(const WString &strInput) const
{
WValidator::Result r;
for(auto v : m_validators) {
if((r = v.validate(strInput)) != Valid) {
return r;
}
}
return Result(Valid);
}
std::string MultiValidators::javaScriptValidate() const
{
std::string s;
for(auto v : m_validators) {
s += v.javaScriptValidate();
}
return s;
}
</code>
Thanks and regards,
~Plug
CMakeLists.txt (382 Bytes) CMakeLists.txt | CMake file | ||
strings.xml (255 Bytes) strings.xml | Strings file | ||
template.xml (725 Bytes) template.xml | Template file | ||
MatchValidator.js (623 Bytes) MatchValidator.js | JavaScript file | ||
main.cpp (4.81 KB) main.cpp | C++ file |
RE: How to debug streamed JavaScript? - Added by Plug Gulp about 12 years ago
Looks like in my test application, the validator's JavaScript function (client-side validation) is never called. Instead the server-side validation occurs. If both validate and javaScriptValidate methods are available then does the server-side validation take precedence?
Thanks and regards,
~Plug
RE: How to debug streamed JavaScript? - Added by Plug Gulp about 12 years ago
Looks like even the WLengthValidator works the same! I put a console.log statement in the WLengthValidator's JavaScript function and log statement in C validate function. Everytime runtime validation is performed, the server-side validate is called. There is no console.log message printed on the browser side. Is there a way to enable client-side validation? Do I need to configure something?
Thanks and regards,
~Plug
RE: How to debug streamed JavaScript? - Added by Plug Gulp about 12 years ago
Hi,
I think my understanding of "client-side validation" is not complete. Does client-side validation mean giving visual cues dynamically on the form field(s) before and/or while data is being entered? For example, consider the test code posted earlier. Following are the observations:
1. If data in entered in widget W1 and then the focus is shifted to widget W2, the W2 widget immediately turns red with the tooltip "The field cannot be empty".
2. Now, if in the test code I disable the mandatory-field validation check then I was expecting to see the same effect described in #1 but with "Data does not match!" tooltip. This does not happen. Why?
3. I tried replacing the custom validator with WLengthValidator and the results are the same. I get immediate visual cue if mandatory-field validation is enabled. But does not get the immediate visual cue for field-length validation if mandatory-field validation is disabled.
What is special about the mandatory-field validation that the visual cues appear instantaneously where as the other validators fail to provide such instantaneous cues? For all the validators, except the mandatory-field validator, the visual cues of invalid data appears only when the Test button is clicked.
I hope I have properly articulated the issue I see.
Thanks and regards,
~Plug
RE: How to debug streamed JavaScript? - Added by Koen Deforche about 12 years ago
Hey,
Let me check. Your observations indeed seem to indicate a bug : whether the validator is set mandatory or not should not have such consequences.
Regards,
koen
RE: How to debug streamed JavaScript? - Added by Koen Deforche about 12 years ago
Hey Plug,
I've tried your test case. I had to make one modification in MatchValidator.js, line 14 should read:
v = elem.value;
instead of
v = edit.value;
I found out about this, because ... it actually seems to work just fine for me ? The validate function is called on every key stroke as well as on blur() and focus() events.
I also tried with toggling the mandatory field from true to false.
Btw, unless you plan to submit the validator to Wt (for which I could se a good use in Wt::Auth ?) I wouldn't recommend to use LOAD_JAVASCRIPT and WT_DECLARE_WT_MEMBER tricks we use in the library. You can achieve almost the same using WApplication::require() --- the LOAD_JAVASCRIPT trick is there to minimize deployment hassles.
Regards,
koen
RE: How to debug streamed JavaScript? - Added by Plug Gulp about 12 years ago
@Koen Deforche
"I had to make one modification in MatchValidator.js, line 14"
Damn! I should stop drinking too much coffee and using too much yy+p!
But on the other note it still confuses me on how you are able to hit that JavaScript function where as I cannot! Otherwise I would have found that bug myself!
@Koen Deforche
"I found out about this, because ... it actually seems to work just fine for me ? The validate function is called on every key stroke as well as on blur() and focus() events. I also tried with toggling the mandatory field from true to false."
I am still not able to get it working. Infact since I posted my original question, the things have gotten worse. I now don't even get visual cues let alone client-side validation. Since my original post I have done security update of the OS (Ubuntu 12.10), updates of the browsers and update of Wt(upstream). I am attaching the screenshots of output of debuggers, for IE10.0.9200.16540, Opera 12.02.1578, Firefox 20.0.1 and Chrome 26.0.1410.64 m, when I run the test. It is surprising that there are lots of CSS errors and one exception! I don't know why that has started happening. Also I have observed one additional thing in the whttp log. For every request, I see a log entry "CgiParser: end of multi-part data". Earlier I never use to see this message for every request.
@Koen Deforche
"Btw, unless you plan to submit the validator to Wt (for which I could se a good use in Wt::Auth ?"
I am okay with submitting MatchValidator upstream. I send a pull request once I get it working on my system.
@Koen Deforche
"I wouldn't recommend to use LOAD_JAVASCRIPT and WT_DECLARE_WT_MEMBER tricks we use in the library. You can achieve almost the same using WApplication::require() --- the LOAD_JAVASCRIPT trick is there to minimize deployment hassles."
And how do I do that? Do I need to write a pure JavaScript source file rather than a hybrid C/JavaScript file and then load it using WApplication::require()? And then how does it get called?
Kind regards,
~Plug
MatchValidatorChromeDebuggerOutput.png (54.7 KB) MatchValidatorChromeDebuggerOutput.png | Chrome Debugger Output | ||
MatchValidatorFirefoxDebuggerOutput.png (172 KB) MatchValidatorFirefoxDebuggerOutput.png | Firefox Debugger Output | ||
MatchValidatorIEDebuggerOutput.png (54.2 KB) MatchValidatorIEDebuggerOutput.png | IE Debugger Output | ||
MatchValidatorOperaDebuggerOutput.png (163 KB) MatchValidatorOperaDebuggerOutput.png | Opera Debugger Output - Exception | ||
MatchValidatorOperaDebuggerOutputErrors.png (141 KB) MatchValidatorOperaDebuggerOutputErrors.png | Opera Debugger Output - Errors |
RE: How to debug streamed JavaScript? - Added by Plug Gulp about 12 years ago
I did a separate fresh setup and things seem to work! Looks like something on my old setup is forcing the issues mentioned in my last post above.
Kind regards,
~Plug