Errors on web pages and how to find and fix them. How to Fix a Script Error in Internet Explorer Using the Console to Detect Syntax and Other Code Errors

Quite often, users can observe a situation where a script error message appears in the Internet Explorer (IE) browser. If the situation is of a single nature, then you should not worry, but when such errors become regular, then you should think about the nature of this problem.

Script error in Internet Explorer is usually caused by incorrect processing of the HTML page code by the browser, the presence of temporary Internet files, account settings, and many other reasons, which will be discussed in this material. Methods for solving this problem will also be considered.

Before proceeding with the common methods for diagnosing problems with Internet Explorer that cause script errors, you need to make sure that the error occurs not only on one particular site, but on several web pages at once. You also need to check the web page that is experiencing this problem under a different account, on a different browser, and on a different computer. This will narrow the search for the cause of the error and exclude or confirm the hypothesis that messages appear as a result of the presence of certain files or settings on the PC.

Blocking Internet Explorer active scripts, ActiveX and Java

Active scripting, ActiveX controls and Java affect the way information is generated and displayed on the site and can be the real cause of the previously described problem if they are blocked on the user's PC. In order to make sure that script errors occur for this reason, you just need to reset the browser's security settings. To do this, follow the following guidelines.

• Open Internet Explorer 11
• Service

• In the window, go to the tab Security
• Next click the button Default and then the button OK

Internet Explorer Temporary Files

Every time you open a web page, Internet Explorer saves a local copy of this web page on your PC in so-called temporary files. When there are too many such files and the size of the folder containing them reaches several gigabytes, problems with displaying the web page may occur, namely, a script error message will appear. Regularly clearing the temporary files folder can help fix this problem.
To delete temporary Internet files, follow the steps below.

• Open Internet Explorer 11
• In the upper right corner of the browser, click the icon Service in the form of a gear (or the key combination Alt + X). Then, in the menu that opens, select
• In the window, go to the tab General
• In section Browser history press the button Delete…

• In the window Delete browsing history check the boxes next to the items Temporary files of the Internet and websites, Cookies and website data, Journal
• Click the button Delete

Operation of antivirus software

Script errors are possible through the operation of an antivirus program when it blocks active scripts, ActiveX and Java controls on a page, or folders to save temporary browser files. In this case, you should refer to the documentation for the installed anti-virus product and disable scanning folders to save temporary Internet files, as well as blocking interactive objects.

Incorrect processing of HTML page code

It appears, as a rule, on one particular site and indicates that the page code is not fully adapted to work with Internet Explorer. In this case, it is best to disable script debugging in the browser. To do this, follow these steps.

• Open Internet Explorer 11
• In the upper right corner of the browser, click the icon Service in the form of a gear (or the key combination Alt + X). Then, in the menu that opens, select
• In the window, go to the tab Additionally
• Next, uncheck the box Show notification for every script error and press the button OK.

This is a list of the most common reasons that cause script errors in Internet Explorer, so if you are tired of such messages, pay a little attention and solve the problem once and for all.

Sometimes the browser may notify the user that a script error has occurred. This also applies to standard Internet Explorer. In it, by the way, such a failure occurs more often than in other browsers. What can cause this problem and how to solve it?

A script error usually occurs when the browser cannot correctly process the HTML page codes. Also, a download failure can cause an excessive amount of temporary files (especially if the browser has not been cleaned of them for a long time). Also, some account settings may prevent the resource from starting correctly. Today we will look at how to remove the script error in Internet Explorer, taking into account all these reasons.

First steps

If this happened for the first time, it may be an isolated case. Therefore, there is nothing to worry about. Try reloading the page. If a notification appears again asking if you want to stop running this script, click on the "No" button.

We determined that this was not an isolated case. What to do next? See if it gives an error when opening all pages or just one. If on one, then go to another account on the same site, open the page in another browser and PC.

You can use a different browser. Today there are a lot of them, while they are in no way inferior to a standard instrument, they even surpass in many things. If you have all your bookmarks saved in IE, you can use the data export function.

Blocking active ActiveX and Java scripts

Have you decided not to switch to another program? In this case, we will solve the problem further.

Active X and Java may be disabled or blocked. This is one of the common causes of scripting error. What to do in this case? You need to reset your browser security settings.

Run the program. Click on the gear icon. She will be next to the asterisk. In the list of options that appears, select the "Internet Options" section. This will be the penultimate point.

Open the second tab "Security". Click on the "Default" button. Click on OK.

Temporary files in the browser

Internet Explorer saves page versions when they are launched. All copies are stored in a folder with temporary files. This folder needs to be cleaned from time to time. If the folder reaches, for example, a volume of several gigabytes, the browser will freeze and issue, in particular, a script error. In this case, you need to remove all the contents of the specified storage.

The following method will help you get rid of junk in the cache, browsing history, cookies, web form data, and passwords. You, of course, have the right to choose which kind of files to delete and which to keep.

• Again, click on the gear already familiar to us. Select "Internet Options".
• Switch to the "General" section.
• In the "Browser History" block, confidently click on the "Delete" button.
• Check the boxes for temporary files and other types of files that you want to get rid of, and then confirm the deletion.

Antivirus blocking

Scripts may not run because your antivirus software is blocking them or scanning folders with temporary files. What do we have to do? Open the antivirus window and disable the blocking of interactive elements. There is no single disable instruction for all antiviruses. The procedure will differ depending on your type of antivirus.

Incorrect processing of HTML page code

This situation usually occurs when only one site freezes. This means that the page code is not suitable for Internet Explorer. For the page to load, script debugging must be disabled.

• Go back to the "Internet Options" window.
• This time go to the fourth block "Additional".
• Uncheck the "Show notification for every script error" box. Save your changes.

If the user has disabled script debugging, the error notification no longer appears. The page will freeze anyway, so this method can only be used if there are problems with only one site.

Download available updates

The script may also run incorrectly due to the fact that the necessary updates for the system itself and Internet Explorer are missing. The update can solve the problem completely.

Go to the Update Center on your PC and make sure all updates are installed. If not, then run the installation.

Using the system registry

The failure may appear when Windows boots, that is, when the computer starts. This is far from a serious failure, but it still needs to be corrected. The system registry will take over. The way to fix the error is much more complicated than the previous ones. If you're new, ask a more knowledgeable user to do it for you.
1.Launch the "Run" window and enter the regedit command in the line.

2. Click on the HKEY_LOCAL_MACHINE block with the right mouse button and select "Permissions".

3. In the window that appears below, set full access and reading.

4.Open Advanced Options. Click on the "Change" button and set "Allow

5. We confirm saving the settings. We click on OK.

6.Restart your device. Call command line. The final touch is the following command: regsvr32 msxml.dll. Press Enter on your keyboard.

Script error in Internet Explorer is solved in many ways. We presented both simple and complex ones. The choice of method depends on the cause, and since it is not so easy to determine, use method after method.

Using the F12 developer tools to debug JavaScript errors

This content links to an older version of the F12 Developer Tools. Download the latest F12 documentation.

F12 tools allow developers to quickly debug JavaScript code without leaving the browser. Built into every instance of Windows Internet Explorer 9, the F12 developer tools provide debugging tools such as breakpoints, watch and local variable viewing, a message console, and immediate code execution.

This article covers how to use the F12 developer tools to debug JavaScript code. This article is not meant to be an exhaustive debugging tutorial, its purpose is to highlight tools that can help a developer get started with the generated code. In Internet Explorer 9, press the key F12 to open Developer Tools and click the tab Scenario to get started.

On the tab Scenario on the left is the source code area, where a developer can view their JavaScript code, set breakpoints, and step through their functions. In the right pane, you can switch between console tabs, Watch Variables, Local Variables, Watch Stack, and Breakpoints.

Starting and stopping the debugger

When you first open the F12 developer tools and click the tab Scenario, your code appears on the left and the console on the right. You may see a message in the console: "Refresh the page to see the messages received prior to opening the F12 developer tool." When you refresh the web page, the console will display any errors and warnings caused by the browser.

To set breakpoints, view control and local variables, and view the call stack of a sequence of functions, click Start Debugging. Button press Start Debugging refreshes the web page and reruns the code in the debugger.

Using the Console to Find Syntax and Other Code Errors

In most programming projects, errors are divided into syntactic, logical, and data entry errors. Console view shows JavaScript errors and exceptions, as well as DOM exceptions. Within your code, you can use the console object to send program status and error messages to the console instead of calls to "alert()" or available screen space. For example, you can add the line

Window.console.log("The file opened successfully");

Into your JavaScript code to get information about the state of the script without interrupting its execution. Additional information: .

Fixing the appearance of scripts

The F12 developer tools can debug JavaScript at the line or statement level, regardless of how the code is displayed. You can even step through scripts that are compressed to look like a large block of code. But sometimes it's hard to keep track of the logic when the code is one block.

To format the script, click the button Configuration and select the item Format JavaScript. The following screenshots show the JavaScript code block before and after formatting.

Interrupt code execution

Setting breakpoints in the F12 developer tools is similar to setting breakpoints in binary code debuggers such as Microsoft Visual Studio. In the left pane, click to the left of the line of code where you want to stop. Breakpoints are toggleable, so a click adds a breakpoint and a second click removes it.

You can add as many breakpoints to your code as you need. You can either right-click a line of code and choose command Insert breakpoint, or click in the left box next to the statement where you want to set a breakpoint.

Using the F12 authoring tools, you can set a breakpoint at the statement level, even if those statements are in a block or line of multiple statements. This allows you to create a breakpoint in a compressed code segment. The best way to set a breakpoint under these conditions is to right-click the code and select Insert breakpoint. You can also use the script formatting described earlier (beautiful printing) by formatting lines to make them easier to click in the margins.

Manage multiple breakpoints using the Breakpoints tab

When using a large amount of code with a large number of breakpoints, or even consisting of several files, you can use the tab Breakpoints to trace all the desired points. On the tab Scenario click tab Breakpoints in the property or right pane. See the following image for an example:

On the tab Breakpoints the developer can enable or disable, delete, select, and copy breakpoints without having to navigate to the exact locations of the desired breakpoints. To enable or disable a breakpoint, select or clear the check box next to the setting you want to change. You can also jump directly to a breakpoint in your code by double-clicking it in the list. You can select multiple breakpoints at the same time by pressing the key CTRL and clicking the desired breakpoints.

On the tab Breakpoints You can also use the context menu (which opens with a right-click) to remove, enable, disable, or copy breakpoint groups. These parameters are shown in the following table.

Menu item	Action
Delete	Deleting a breakpoint without the possibility of recovery.
delete everything	Deleting all breakpoints without the possibility of recovery.
Enable all	Checking all checkboxes in the list.
Disable all	Clear all checkboxes in the list.
Condition	Allows you to set a conditional breakpoint for a single point. This item is not available if multiple breakpoints are selected.
Copy	Copies the description text of the selected breakpoints.
Select all	Selects all breakpoints in the list.
Go to source code	Move to the left area of ​​the code to display the selected breakpoint. This item is not available if multiple breakpoints are selected.

Conditional breakpoints

Unconditional stopping on a line of code is useful, but even more powerful is stopping when a property or variable reaches a particular value. To stop when a specific value is reached or set, create a breakpoint and then open the tab Breakpoints. Right-click the desired breakpoint and select command Condition.

In the conditions dialog box, add the correct JavaScript statement. The executing code will stop at this breakpoint when the statement evaluates to true. For example, in the following image, code execution stops when the value of the oAudio.paused property becomes false.

You can specify a single condition, or use logical operators to create a more complex stop condition. But remember that the scope of variables and objects will remain the same as when they are displayed in the breakpoint viewer window. The value of an out-of-scope condition will not evaluate to true.

Stepping through the code

When code execution stops at a breakpoint, you can use the jump buttons to continue execution ( F5), execution interrupts ( CTRL+SHIFT+B), step-by-step entry into the function ( F11), function skips ( F10) or exit from the function ( SHIFT+F11). When execution is stopped at a breakpoint or when stepping through, the debug window actually becomes modal.

Therefore, before continuing to interact with the web page, you need to stop debugging ( SHIFT+F5) or continue execution ( F5). You should keep this in mind if a web page seems to stop responding. If, when multiple windows are open, the debugger window is not on top, it may wait for a reaction at the breakpoint. In this case, to take back control of the web page, locate the debug window for that web page and click F5 to continue or click SHIFT+F5 to stop debugging.

Viewing Variables Using the Watch and Local Tabs

Tab watch allows you to define and view watch variables in the code you are debugging. It contains the name, value, and type of the given variables. You can click on the line marked click to add..., on the tab Reference values and enter a variable name. If you don't feel like typing the variable name, you can copy and paste it into the list of control variables.

The values ​​in the list of watch variables are displayed regardless of whether the code is currently being debugged or not. When debugging is enabled and code tracing or breakpoints are set, the scope of the values ​​of the variables in the list is determined by the current execution point of the script. If debugging is disabled, the scope is global and only global variable values ​​will be shown.

Unlike a tab Reference values, whose values ​​are shown regardless of whether the corresponding variables are in scope, on the tab Local only variables in the current scope are shown. You don't need to add variables to view, because when you change the scope, this tab is updated to show all available variables.

To see the difference, open the following example in Internet Explorer 9 and follow the given steps.

Run

1. Download the example in Internet Explorer 9.
2. Press key F12 to open the F12 developer tools and click the tab Scenario.
3. In the left pane, scroll to the first function, right-click on the line "var a = 5;" and select command Insert breakpoint.
4. Click the button Start Debugging, and then on the web page in the browser, click the button Run(Execute).
5. In F12 Developer Tools, click the tab Reference values on the right side and add the variables "a, b, c, and d.".
6. Step through the code by pressing the key F11 or button Step in, and view the variables in the tab Reference values.

When stepping through each function, the lookup values ​​should change from undefined to some values.

To feel the differences from the tab Local, press the key F5 to continue from developer tools F12. On the web page in the browser, click the button Run(Run) to run the code again and return to F12 developer tools. On the right side of the tab Scenario click tab Local and press the key F11 to step through the functions again. Note that the list of local variables only contains variables that have values. In view Local it also shows the arguments passed to the function, their value and type.

Call stack view

Tab call stack allows you to view the path traversed when calling functions from code. This can help you discover an unexpected code path that resulted from an error. On the tab call stack you can double-click any function and jump to its call in the source code.

Try the above example and follow the tab call stack when step-by-step code execution with entering functions.

On the tab call stack the current function or location is always at the top (indicated by an arrow as in the tab call stack, and in the fields of the code). Double-clicking any of the functions in the list highlights the operator that calls the function.

Debugging multiple scenarios

Large web pages tend to use multiple JavaScript files. The F12 developer tools allow you to work with multiple script files, just like when debugging your code. To view a different file, click the down arrow next to the button. Start Debugging to list the scripts associated with this web page. When using the F12 developer tools, code will be stepped through all files. You can add variables from any script file to view, and the call stack view will show the execution path through the functions contained in the various script files.

Changing the document mode setting

Document mode setting on the right side of the line Menu is available on every F12 developer tools tab, but this setting is especially useful when debugging code on the F12 tab. Scenarios. Internet Explorer 9 allows you to change the document mode to emulate the standards of previous versions of Windows Internet Explorer. In Internet Explorer 9 exit from adsets the document type to compatibility mode by default. When dealing with a new feature or new standard, such as in HTML5, some errors may look like programming errors but are actually caused by a missing or incorrect doctype declaration.

The F12 developer tools for Internet Explorer 9 can't fix your code for you, but they make it a little easier to find JavaScript errors.

There are many articles on Habré that describe interesting and complex aspects of web development, but there are many readers who, at the beginning of their career as a web developer, would like to see material that would allow you to take the first step from “PHP in 24 hours” to development at a serious level, and I would like to share my experience in this matter.

The features of the web application make it divided into two parts: client and server. On the client side, JavaScript code works (maybe VBScript can also be found somewhere, but we will probably not consider this case), on the server side - a lot of things, in principle, but we will consider PHP, the most popular language for server side of web applications. It would also be interesting to talk about debugging and profiling Flash applications on the client side, but the topic covered is already extensive, so let's leave it for now.

The analysis and validation of HTML code can also be attributed to the tasks of debugging client code. This seems to be a task not entirely from the field of programming, but also important.

Some parts of the considered tasks have already been considered in other articles, and I have provided links to them.

Debugging and profiling client code

The "classic" way to debug JavaScript code is to use the alert function and its derivatives. I remember that at the beginning of my career, I personally wrote the print_r function for JavaScript, because I did not see the possibility to display debug information on arrays and objects. It looked something like this:
function print_r(variable) ( if (variable instanceof Array || variable instanceof Object) ( var key; for (key in variable) alert(key + " => " + variable); ) else ( alert(variable); ) )

Of course, there was no talk of any profiling at all.

With this approach, even information about the console object is revolutionary.

The specifics of the client side of a web application requires debugging the code in all popular browsers. Of course, most often there is enough debugging in Internet Explorer and any other normal browser, but we will consider all options.

Mozilla Firefox

Probably, it is Firefox that can be called the pioneer of debugging client code. For a long time, it was listed as the browser of choice for development, thanks to the Firebug extension, which probably contains everything you need, except for HTML code validation.

Also, starting from version 4, a built-in Web Console appeared, which implements part of the functions of the Firebug "Console" and "Network" tabs, as well as some CSS debugging capabilities.

Starting with version 6, the Simple JavaScript Editor appeared, which also implements one of the Firebug's functions, and allows you to write and execute code directly in the browser.

Starting with version 10, the Page Inspector appeared, which allows you to study HTML code and CSS properties, that is, it implements the functions of the HTML tab.

The Html Validator extension is usually responsible for validating HTML code. Just its icon, indicating the number of errors on the main page of the site habrahabr.ru, can be seen in the lower right corner of the browser in the picture with the Page Inspector.

Also, taking this opportunity, I will point out that for this browser there are many extensions that make life easier, about which there was already a corresponding one on Habré.

Google Chrome and Safari

These WebKit-based browsers have a built-in Web Inspector authoring tool that is very well developed and implements pretty much the same functionality as Firebug. At the same time, we must pay tribute to him, he does not slow down the browser, which is found in the "big brother".

In Chrome, it can be invoked by pressing Ctrl+Shift+I or simply by pressing F12 . In Safari, it is well hidden, and to use it, you need to enable development options in your browser settings. Later, the developer tools will become available from the "Develop" item of the main menu or by pressing the keyboard shortcut Ctrl+Alt+I .

To validate HTML code, you also need to install third-party extensions. For example, for Chrome, this could be Validity . For Safari, nothing suitable has yet been found.

Opera

Opera also has a built-in developer tool called "Opera Dragonfly" that can be invoked at any time with the keyboard shortcut Ctrl+Shift+I . It is similar to what WebKit presents us, and has similar features and advantages, although, in my personal opinion, it is less convenient.

Debugging and profiling server code

xdebug

As we agreed at the beginning, we are considering the case where PHP is used on the server. Here the "classic" debugging methods are echo , print_r and var_dump , but there is also a debugging tool, as in the best houses - Xdebug . For me personally, due to the specifics of studying at the institute, it looked “just like in Delphi”.

The xdebug extension allows you to at least step through the code and view the values ​​of variables, which takes PHP programming to a new level. About the intricacies of working with xdebug there was a corresponding . XDebug is usually available in the GNU/Linux repositories, on Windows it is also not too difficult to install by copying the dll file.

When using this extension, an incoming connection is received from the server to the development computer (by default, on port 9000), which it must process. To do this, you need to configure your IDE accordingly.

By the way, using an IDE is also a prerequisite for moving forward. Some programmers believe that the difference between programming in a code-highlighted notepad and in an IDE can only be seen on large projects, but personally I am of the opinion that the difference is visible even on the program "Hello world!" - one autosubstitution of names and arguments of standard functions is worth something.

XHProf

About extension

Yes, xdebug provides profiling capabilities, but I personally like Facebook's development for this purpose, XHProf . I honestly did not conduct any tests, but this extension is considered to be much better suited for production servers and for profiling under real loads.

Installation

Unfortunately, this extension is not included in any repositories. It is included in PECL, but for some reason its regular installation often causes problems. For this reason, you have to install from source.

# Get the sources wget http://pecl.php.net/get/xhprof-0.9.2.tgz # Unpack the sources tar -xvf xhprof-0.9.2.tgz # Change to the directory containing the extension code cd xhprof-0.9. 2/extension/ # Compile and test phpize ./configure make make test # Install civilly checkinstall
The xhprof.ini configuration file gives us something like this:

extension=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so
; Directory for logs
xhprof.output_dir="/var/log/xhprof/"

Profiling

The directory that we get by unpacking the archive contains, in addition to the extension sources, also a web interface for studying the profiling results, and libraries for profiling the application.

Let's take an example of profiling. The following elements must be included in the application code:
// Beginning of the script, enable profiling // of both CPU and memory load xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); /* * Main application code */ // End of script, finish profiling, // write the result to the log $xhprofData = xhprof_disable(); include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_lib.php"; include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_runs.php"; $xhprofRuns = new XHProfRuns_Default(); $namespace = "some-unique-name"; $runId = $xhprofRuns->save_run($xhprofData, $namespace); echo "\n";
Here the XHPROF_DIR constant points to the directory where we unpacked the downloaded archive.

To analyze the results, you need the same web interface. It can be found in the $XHPROF_DIR/xhprof_html/ directory - let's conventionally denote it like this. For example, we located it in a place accessible to the web server, and it is available at example.com/system/xhprof/ , then to analyze the result of the work, we need to access it as follows:

Example.com/system/xhprof/?run=%runId%&source=%namespace%

We will get a similar result:

Profiling can be included in the application code on a permanent basis, or, for example, you can make it run randomly with a certain probability or on the presence of a certain condition. For example, like this:

$needProfiler = (mt_rand(0, 100)< 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
In this case, you can, having complaints from customers or suspicions, turn to the results of profiling for a certain time period. Using the namespace parameter, you can determine which part of the application (which script, controller, action) was profiled.

Profiling SQL queries

As a rule, it is the work with the database that is the bottleneck in the application. For this reason, query profiling is recommended. For example, consider part of a class that wraps around mysql extension functions. Yes, I know that this extension is not very loved and wish it dead no less than the good old IE6. I do not urge to use it, it's just that such a class is at my fingertips.

/** * Query * @param string $sql Query * @param array $params Parameters * @param string $query Compiled query * @return array Result */ public function query($sql, array $params = array(), & $query = "") ( $start = microtime(TRUE); // Execute the query, including parameter "protection" $stop = microtime(TRUE); $time = $stop - $start; $this->_addProfilerData($sql , $time); // Return result ) private function _addProfilerData($query, $time) ( if (is_array(self::$profilerData)) ( self::$profilerData = array("query" => $query, " time" => $time); ) ) public function __destruct() ( if (is_array(self::$profilerData)) ( $this->_writeProfilerData(); self::$profilerData = FALSE; ) // Disconnect from the database ) private function _writeProfilerData() ( $values ​​= array(); foreach (self::$profilerData as $row) ( $query = mysql_real_escape_string($row["query"], $this->con); $time = ( float)$row["time"]; $hash = crc32($row["query"]); $values ​​= "($hash, "$query", $time)"; ) if ($values) ( $strValues ​​= implode(", ", $values); $sql = "INSERT DELAYED INTO `profiler_queries` (`query_hash`, `query`, `work_time`) VALUES $strValues"; @mysql_query($sql, $this->con); ) )
Here, query profiling data is stored in the profiler_queries table. This table can be of type MyISAM or Archive, as they provide the ability to perform lazy inserts, which does not create an unnecessary delay in the response when profiling. Also, for a better search for queries in the table, it is better to create a column of type INT , where the crc32 hash of the query will be written, on which you want to create an index.

Conclusion

The article is quite large. Perhaps here I went over the top and touched on topics that have already been touched upon, but if I had read something similar in due time - an article where all the information is collected together and useful links are given, it would have been of invaluable help to me. I hope that my article will help someone on the path to enlightenment.

There are, of course, others - I will definitely mention them.

Firebug for Firefox

I don't know for sure whether firebug the progenitor of other developer tools, but it's definitely the most popular, user-friendly, and feature-packed .

Firebug is an add-on for Firefox, which means it must be downloaded from the Firefox add-ons site and installed.

In order to call the firebug, just press F12.

Features of this add-on:

• Inspection and editing of dynamically changing HTML;
• CSS editing on the fly;
• Debugging JavaScript, command line for executing scripts;
• Monitoring of network requests - you can see the size and download time of files and scripts, request headers;
• DOM parser.

You can talk about these features in detail for a long time, but I think that they are known to all our readers, and if not, detailed information is on the Firebug home page or the same is translated by Ilya Kantor.

In addition to firebug itself, you may need a useful lotion for it - firecookie, with which (surprise:-) you can view and modify cookies.

WEB Developer Toolbar for Firefox

Another useful addition to Ognelis. It looks like this:

Let's go through the points.

Disable

Allows you to turn off JavaScript, disable the use of the cache, which is very useful in development (allows you to be sure that the page loaded with the latest updates), cancel the colors used on the page and replace them with standard ones, disable sending in the referrer header (the page from which the transition was ).

Cookies

A useful option for working with cookies: they can be viewed, deleted, blocked and added.

css

This menu holds the Developer Toolbar's coolest feature - on-the-fly CSS editing. In addition, it is possible to view css, disable, and so on and so forth. In my opinion, the presence of keyboard shortcuts is very useful here (CTRL + SHIFT + C, for example, allows you to immediately go to viewing page styles)

Forms

Everything for working with forms: show passwords, show information about forms, convert form methods (GET » POST and vice versa) and much more. A useful function "Populate Form Fields" for automatically filling in form fields (for example, when testing a site when the password remembering function is disabled. Otherwise, I don’t see anything useful in this paragraph.

Images

There is a useful function to turn off images - to see what your site looks like without images. Pictures can be circled, show their sizes, show alt-attributes.

information

This menu has a lot of options. It can be useful to display the class and id attributes on the page. In addition, the “View Color Information” item is interesting - to quickly get information about the colors that are used on the page. "View document size" - view page size. "View Response Headers" - view the page headers.

Miscellaneous

The most commonly used feature is clearing the cache. In addition, the "Page ruler" - ruler, "Page Magnifier" - magnifying glass and "Line guides" - a few lines are available here, which can be useful to trim the template.

outline

Selection of different page elements - tables, headings, links, frames, blocks. Resize allows you to resize the browser window to fit any standard screen extensions. Tools here are stored features for page validation. Both local and external. Convenient and quick access to validate HTML, CSS, and more. You can use the CTRL+SHIFT+H keyboard shortcut to validate HTML.

view source

View source code. Ability to view in an external application, view the generated code.

The one on the right is my favorite. It's a fast HTML, CSS validator and JavaScript error indicator. If there are no problems, the icon is green, and if there are problems, red.

Internet Explorer Developer Toolbar

Starting from 8.0 error debug is already built into this browser. It is easily called F12 key. True, he is miserable as a program of the 90s.

But there is a much cooler tool for this browser, the so-called Internet Explorer Developer Toolbar can be downloaded from the link.

In appearance, this toolbar, of course, looks like firebug, but, alas, it has not grown up to it yet. Although, on the other hand, it has some features that the firebug does not have. I would call Internet Explorer Developer Toolbar some hybrid of Firebug and firefox web developer Toolbar.

Like in firebug, it is possible to inspect an element with a simple click. But, if we can immediately see paddings and margins, then there is no such possibility here.

Also, the Internet Explorer Developer Toolbar does not dynamically update the element tree, as Firebug does. That is, if we change something on the page using js, we will not see anything using this toolbar.

From what you can enjoy - changing CSS on the fly (an easy way to find what to hack :), the ability to disable CSS and images, the ability to quickly clear the cache and play with cookies, quick access to validation.

The most delicious: there is a built-in color picker that allows you to get any color from the page using an eyedropper. (for ff there is a separate ColorZilla plugin).

Debug Debug Bar for Internet Explorer

You can download DebugBar for Internet Explorer from the given link.

An interesting extension in its own right. Installed as an additional panel to the browser:

For some reason, there is a built-in search engine, an eyedropper, the ability to resize the window and, again, for some reason, the ability to send a page to a friend for soap. Although it might be useful. But I failed to take advantage of this opportunity.

In addition, there is an inspector:

The method of inspection by clicking or pointing did not suit the developers: they came up with a more interesting thing. In the DebugBar, you need to drag the target to the desired element to see it in the tree. There is no option to edit CSS. But there is a validator and a built-in js console.

And if you dig into the settings, you can find this:

Both funny and sad.

It is known that the Developer Toolbar will be built into the eighth explorer. It will be similar to the one described in the third paragraph, but we hope that it will be better.

Debug DragonFly for Opera

DragonFly has been built into Opera since version 9.5, so there is no need to install it. In order to activate Dragonfly, go to Tools → Advanced → Developer Tools. And if in English, then Tools → Advanced → Developer Tools.

I will immediately warn you that DragonFly is in the Alpha2 stage, this explains many of its glitches.

Features list:

• DOM inspector;
• Click Inspection (again, we won't see padding like in FireFox);
• Editing ;
• Quick access to the error console.

DF is something like a separate page in a frame. If you open it, it will be open for all tabs (unlike firebug). Therefore, before inspecting an element, we must select the page we want to view from the list.

Unfortunately, here, as in Internet Explorer, the Dav Toolbar does not display dynamically created elements. And in general, when we inspect the page, no JavaScript is run: links and buttons are not clicked. Let's hope that when DragonFly approaches release, we will see all these features.

Debug WEB Inspector in Safari

I’ll say right away that about the browser safari I whistled the information, therefore, as they say, I am not responsible for the adequacy of the material.

In order to enable the "Development" item in the Safari menu, you need to enable the corresponding item in the settings (the "Advanced" tab):

The following functions are available to us in the "Development" menu:

Let's take a closer look at the WEB inspector:

By default, the inspector opens in HTML view mode. But it can be switched to DOM view mode. To do this, there is a switch on the top plate. When hovering over an element in the inspector, it will be highlighted on the page itself. You can't see padding, change markup or CSS on the fly, or see dynamic changes to the DOMe on the fly like you can't in FireBug. But, you see, it looks very nice.

If you want to work with the inspector in a browser window, you can click on the button in the lower left corner.

Even in safari, such a function as the “Network Timeline” is available (the “Network” button in the inspector):

You can clearly see when and how long files are loaded. You can also view the request headers, but, unfortunately, you cannot view the content itself.

Debug for Developers in Google Chrome

Lame was born in an advanced form, and he immediately has, albeit crooked for now, but still tools for developers.

• DOM Inspector;
• javascript debugger;
• JavaScript Console.

In order to inspect an element, right-click on it and select "View element code" in the context menu:

The functionality is the same as in Safari: elements are highlighted on hover, but CSS and HTML editing is not available, changes in the DOM are not tracked. Only, the button in the lower left corner, which should attach the inspector to the browser window, does not work.

In the "Resources" tab, we can see the following:

Slightly different from the scale in the safari. Translucent in this diagram are relative file sizes, and full color is download time. One way or another, it is obvious that this part of Chrome is still far from being completed.

In this article, I reviewed the most famous extensions and built-in tools for browsers.

There are others, for example:

• Internet Explorer WEB Development Helper is a good helper for ASP.NET developers (Internet Explorer);
• WEB Developer Toolbar - toolbar for Internet Explorer and FireFox. There are several useful features;
• WEB Accessibility Toolbar - toolbar for Internet Explorer. Nothing interesting.

If there are add-ons that I didn’t mention, but would be worth it, or there are functions for the mentioned extensions that I missed, write.

Use on health!