Recently, in order to understand what the HTTP session and the server are sent, I have found a lot of tools, I haven't found the most suitable, and the comViw recommended by my friends is more powerful, huh! Power is a matter, function Too many, I don't have all the completed how to use it! I saw this thing today, I feel simple and convenient! Strap here, I will study it carefully, so hard!
Onestab.net
Using Mozilla debug web pages
Translation: Oneestab [2004.02.27] Original: gemal.dk [2004.02.09]
Mozilla is a very good web creation and web development tool that can not only be used as a web editor, but also as a debug tool. This article will introduce several cool features of Mozilla, you can use it quickly and exclude errors for web and web applications.
The original writing is used in Windows XP Mozilla 1.4a and Internet Explorer 6.0 SP1 in Windows XP, all of which English version. [Translation] This paper is used in the translation of Windows 98 and the Mozilla 1.6 and IE 6.0 SP1 in Windows 98, all of which are Chinese. ]
Other languages in this article: English | French
Welcome to give feedback. please contact me.
JavaScript console
The error that appears in the web page is caused by JavaScript, and most of the very simple mistakes, I think this is why some websites cannot work properly under Mozilla. In fact, these mistakes are very easy to avoid.
Even if the setting is correct, Internet Explorer just pops up a almost unused dialog box, telling you that "the page has an error", and beginners are difficult to copy the error on the clipboard. Want to debug errors in IE, you must download Microsoft's script debugger, which is the script debug environment for Internet Explorer.
Figure 1: JavaScript error in IE
Mozilla provides a JavaScript console that can record all script errors. Open the JavaScript console when you have a website test, and any JavaScript error can be seen immediately. It is indeed an indispensable website development tool.
JavaScript Control Settings The wrong file name and line number, as well as the context of the error, so that you can easily find the wrong position and error.
Figure 2: Error displayed in the JavaScript console in Mozilla
You can right-click an error and copy it on the clipboard. The JavaScript console also needs to be improved, you can't save all entries to a file, and the wrap is incorrect.
You can start it from the Tool-> Web Development -> JavaScript console.
Strict pattern JavaScript warning
The JavaScript warning message in strict mode is generated by the core JavaScript engine located in the browser. Each browser can strictly check the JavaScript script, including Mozilla, Internet Explorer, and Opera, but only Mozilla can display a warning.
These JavaScript warning messages are erroneous warnings for the script engine for client script code. These warnings and other JavaScript errors are different and will not terminate the processing of the page, but the speed will slow down slightly because it is an exception generated by the script engine.
Figure 3: Strict mode JavaScript warning
Developers cannot capture such exceptions in other browsers, but can do in Mozilla. You have complete control, write 100% QAVAScript code is no longer difficult.
JavaScript is the most common problem with repeated declarations:
Var response = true; var response = false;
JavaScript check in strict mode produces the following warning:
The correct way to write "Redeclaration of Var Response" should be like this:
Var Response = true; response = false;
The JavaScript console can be activated in the Midnight Edition -> Preference -> Debug -> Display Strict JavaScript warnings. If you are using a formal release, you can enter About: config in the address bar: Config Press Enter to find and open the JavaScript.Options.Strict option.
More information...
Master JavaScript strict mode warning
Cookie Management Today's major websites use cookies. Cookie's debugging is very difficult, but it is difficult to do not fall to Mozilla.
In Internet Explorer, you can't see the current cookie, at least you can't see it directly in your browser. So if you use IE, the only choice is to delete all cookies, if you just want to clear all the cookies of a site, only the% UserProfile% / Cookies folder (under Windows XP) is found and manually deleted, Because I can't know the format of the cookie file, I don't dare to pay you to edit or delete a cookie item for a site.
Figure 4: Cookie Manager in Internet Explorer
Mozilla is completely different. You have full control to cookies, including cookie settings and cancellations. You can use the cookie manager to view all Cookies currently set, and you can choose to delete cookies.
Figure 5: Cookie Manager in Mozilla
Both browsers have a dialog that allows you to choose or reject cookies. The appearance of the dialog is almost the same, but Mozilla is better. It can remember the status information of cookies. If you select View Details, the dialog box will still see the details, and Internet Explorer wants to click the Details button at a time.
Figure 6: Mozilla's cookie dialog
Figure 7: Cookie dialog of Internet Explorer
View the syntax when the source code is highlighted
One of the most common features of web developers is to view source code. Mozilla's source code viewer has a very good syntax highlighting, and in Internet Explorer, you have to use other tools.
Internet Explorer View source code by default by default. The easiest process in the entire Windows system is that Notepad is very simple.
Figure 8: Viewing the source code of gemal.dk with Notepad
Mozilla uses a built-in source video viewer that is easy to understand, and it is easy to understand the overall structure of the HTML file.
Figure 9: GEMAL.DK source code with syntax highlights
You can view the source file of the web page by viewing-> page source code.
View selected part source code
If you have used JavaScript's document.write, it is probably not unfamiliar with the content that cannot be seen. It is difficult to see the HTML code generated with the script in Internet Explorer, you can only see the script itself. Usually use a series of JavaScript Alert to see the generated source code.
Mozilla has a very easy-to-use feature that can save you a lot of alert commands. This feature is called "View Selected Source Code". First marked (select) what you want to view, select "View Selected Source Code" from the right-click pop-up menu. Netscape 4 also has a similar function. In addition, there is an improvement to the source viewer that allows you to switch between the source file and the generated HTML code.
The following is an example, where the quotation number is wrong, if you do not look at the function of selecting some source code, it is almost unable to find the error: for (var i = 0; i <10; i ) {document.writeln ('<< SPAN ID = "ID-" I '"> TEST:' I ''); for (var j = 0; j <5; j ) {document.write (j " < BR> ');}}
Figure 10: View the selected part source code
Page information
Internet Explorer and Mozilla can display the properties of the current page.
Internet Explorer is implemented by file-> properties, and the information displayed is very limited.
Figure 11: Page information of Internet Explorer
And in Mozilla, you can view all information about the current page.
Figure 12: Page information in Mozilla
View page information You can use the view -> page information.
JavaScript debugger
Venkman is a Mozilla's debugger. Verkman provides a powerful JavaScript debugging environment, both of which also have command lines. The functions of the two include breakpoint management, calling stack viewing, and variable / object review, very comfortable. The interactive command line allows you to run a specific JavaScript code, the keyboard shortcuts are the same as the graphics environment.
Figure 13: JavaScript debugger of Mozilla
The JavaScript debugger also supports profiles that can be used for time for metric scripts.
The JavaScript debugger can start from the tool -> Web development -> JavaScript debugger.
More information...
Introduction to the JavaScript debugger at devedge Venkman At Mozilla.org Venkman Developments
HTTP Headers
One of Mozilla's best extensions is Live http headers. It allows you to observe HTTP header exchanged between browsers and web servers in real time. For example, if you want to debug a cookie problem or a problem with MIME header information, you can use it to view detailed information on all HTTP Headers.
Figure 14: Live http headers
Once the Live HTTP Headers extension is installed, you can start from the tool -> Web -> Live Http headers or view -> page information -> Headers.
More information...
Livehttpheaders at mozdev.org
DOM viewer
The DOM viewer can be used to view or edit any web page or XUL DOM. You can use two or three panels to explore the DOM level of the document or node, you can also view the style sheet, style rules, etc., not just DOM.
As can be seen in the screenshot, the border of the text corresponding to the node in the DOM tree is highlighted.
Figure 15: Mozilla's DOM Viewer
The DOM viewer can start from the tool -> Web development -> DOM viewer.
More information ...
Dom Inspector At Mozilla.org Introduction To The Dom Inspector
Cache manager
Mozilla's Cache Manager enables you to access memory or disk cache. You can observe all the information of the cached content, help developers verify that the header information sent by a web application is correct. Figure 16: Mozilla's cache manager entry
Enter About: Cache in the address bar, press Enter to start the cache manager.
Web editor
The Mozilla set contains full-featured HTML editors, this article does not intend to discuss this web editor because each developer has an editor you are in your own.
in conclusion
As a web developer, no mozilla is unimaginable. Mozilla's Web development and debugging tools are very good, ideal for the test and debugging of the website.
If you have any comments or comments, please contact me.
related resources
Mozdev.org Checky Plug-in 101 Mozilla browser can do what I can't do
OneStab.net | W3C Validate
XHTML1.0
