home › Multimedia › Web page error debug. Script errors in Internet Explorer. Causes and solutions. Profiling SQL queries Debug a web page

Web page error debug. Script errors in Internet Explorer. Causes and solutions. Profiling SQL queries Debug a web page

While surfing the Internet Internet browser Explorer may give you messages indicating that the page contains errors and may not display correctly. Let's look at several ways to fix this problem.

Instructions

If there are no visible difficulties in the operation of the browser other than an error that appears periodically, you can try disabling script debugging so that the message no longer appears (if the error appears on more than one site at once, proceed to the next step). From the Tools menu, open Internet Options, select the Advanced tab, and check the “Disable script debugging” checkbox. If you want to turn off notification for all errors, uncheck the "Show notification for every script error" checkbox.

Try opening the site that is causing the error when viewing it from a different account or from a different computer to see if the problem is local. If the error appears, it is most likely caused by incorrect web page code. In this case, you can disable script debugging by following the instructions in the previous step. If the problem goes away when you browse the site using a different computer or account, continue to the next step.

Possibly the browser Internet Explorer at the time of viewing pages, it does not block active scripts, Java and ActiveX, which determine the display of information on the page. To fix the problem, you need to reset your browser security settings. To do this, in the “Tools” menu, select “Internet Options” and go to the “Security” tab. Click the "Default" button and then "OK." If after re-running the page where the error occurred the problem remains, try the next method.

As you know, the browser stores temporary files and copies of pages in a separate folder for later access. If the folder size becomes too large, some pages may not display correctly. The problem can be solved by periodically emptying the folder with temporary files. To do this, open the Internet Options dialog box from the Tools menu. On the General tab, in the History group, click the Delete button. Check the boxes for Temporary Internet Files, Cookies, Log, and Web Form Data and click OK.

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

Firebug for Firefox

I don't know for sure whether it is FireBug the ancestor of other developer tools, but it is definitely the most popular, convenient and functional today.

Firebug is an add-on for Firefox, which means you need to download it from the Firefox add-ons website and install it.

To trigger a firebug, just press F12.

Features of this add-on:

Inspecting and editing dynamically changing HTML;
On-the-fly CSS editing;
Debugging JavaScript, command line to execute scripts;
Monitoring network requests - you can see the sizes and download times of files and scripts, request headers;
DOM parser.

We can talk for a long time about these possibilities in detail, but I think that all our readers know them, and if not - detailed information is on Firebug's home page or the same thing in Ilya Kantor's translation.

In addition to the firebug itself, you may find it useful useful lotion to him - FireCookie, with which (surprise:-) you can view and change cookies.

WEB Developer Toolbar for Firefox

Another useful addition to Ognelis. It looks like this:

Let's look point by point.

Disable

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

Cookies

A useful option for working with cookies: you can view, delete, deny and add them.

CSS

This menu stores the coolest feature of the Developer Toolbar - editing CSS on the fly. In addition, it is possible to view css, disable, and so on and so forth. In my opinion, the presence of shortcut keys is very useful here (CTRL+SHIFT+C, for example, allows you to go directly 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 is “Populate Form Fields” for automatically filling out form fields (for example, when testing a site, when the function of remembering passwords is disabled. Otherwise, I don’t see anything useful in this item.

Images

There is a useful feature to disable images - to see what your site looks like without images. You can circle pictures, show their sizes, and show alt attributes.

Information

There are a lot of options in this menu. The function of displaying the class and id attributes on the page may be useful. In addition, the “View Color Information” item is interesting - to quickly obtain information about the colors that are used on the page. “View document size” - view the page size. “View Response Headers” - view page headers.

Miscellaneous

The most frequently used function is clearing the cache. In addition, the functions available here are “Page ruler” - a ruler, “Page Magnifier” - a magnifying glass and “Line guides” - several lines that can be useful for trimming a template.

Outline

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

View Source

View source code. Possibility of viewing in an external application, viewing the generated code.

I like the one in the right corner the most. It is a fast HTML, CSS validator and JavaScript error indicator. If there are no problems, the icon is green, and if there are problems, the icon is red.

Internet Explorer Developer Toolbar

Starting from 8.0, error debug is already built into this browser. It can be easily called F12 key. True, it’s as poor as a program from the 90s.

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

In appearance, this toolbar, of course, looks like firebug, but, alas, it has not yet matured to it. Although, on the other hand, it has some capabilities that firebug does not have. I would call Internet Explorer Developer Toolbar a kind of hybrid of Firebug and FireFox WEB Developer Toolbar.

As in firebug, it is possible to inspect an element with a simple click. But, if in we can immediately see padding and margins, here there is no such opportunity.

Additionally, Internet Explorer Developer Toolbar does not dynamically update the element tree like Firebug does. That is, if we change anything on the page using js, we won’t see anything using this toolbar.

What you can enjoy is 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 best part: there is a built-in color picker, which allows you to get any color from the page using a pipette. (there is a separate ColorZilla plugin for ff).

Debug DebugBar for Internet Explorer

DebugBar for Internet Explorer can be downloaded 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 change the size of the window and, again, for some reason the ability to send a page to a friend for soap. Although this may be useful. But I failed to take advantage of this opportunity.

In addition, there is an inspector:

The developers were not satisfied with the method of inspection by clicking or pointing: they came up with a more interesting thing. In DebugBar you need to drag the crosshair onto the desired element to see it in the tree. There is no ability 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 is built into Opera starting from 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’ll warn you right away that DragonFly is in the Alpha2 stage, this explains many of its glitches.

Features list:

DOM inspector;
Inspect by click (again, we won't see indentation 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 from the list the page that we want to view.

Unfortunately, here, as in Internet Explorer Dav Toolbar, dynamically created elements are not displayed. And in general, when we inspect the page, no JavaScript is launched: links and buttons are not clicked. Let's hope we see all of these features when DragonFly gets closer to release.

Debug WEB Inspector in Safari

I’ll say right away that it’s about the browser Safari I missed the information, so I am not responsible for the adequacy of the material, as they say.

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

In the “Development” menu the following functions are available to us:

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. For this purpose, there is a switch on the top plate. When you hover 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 in DOMe on the fly like you can in FireBug. But, you must admit, it looks very cute.

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, a function such as “Network Timeline” is available (the “Network” button in the inspector):

You can clearly see when and how long it takes to download files. You can also view request headers, but, unfortunately, you cannot view the content itself.

Debug for developers in Google Chrome

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

DOM Inspector;
javascript debugger;
JavaScript Console.

In order to inspect any element, you need to right-click on it and context menu select “View element code”:

The functionality is the same as in Safari: elements are highlighted when hovered, but CSS and HTML editing is not available, and changes in the DOM are not tracked. But 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 safari. Translucent in this diagram shows the relative file sizes, and full color shows the loading time. One way or another, it is obvious that this part of Chrome is far from finished.

In this article, I looked at the most famous browser extensions and built-ins.

There are others, for example:

Internet Explorer WEB Development Helper - a good assistant 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 they should, or there are functions for the mentioned extensions that I missed, please write.

Enjoy it for your health!

Writing HTML is great, but how do you know where the error is when something doesn't work? This article describes several tools that can help you find and fix errors in HTML.

Debugging is not scary

When you write some code, everything usually goes well until you make a mistake. So, your code doesn't work, or doesn't work as you intended. If you try to compile a broken Rust program, the compiler will show an error:

In this case, the error message is relatively simple to understand - "unterminated double quote string". If you look closely at println!(Hello, world!"); you'll notice that it's missing double quote. Of course, error messages can become much more difficult to understand as your code grows, and even the simplest cases can seem daunting to those who know nothing about Rust.

But don't be afraid to debug! To comfortably write and debug any code, you need to understand the language and its tools.

HTML and Debugging

HTML is not as difficult to understand as Rust. The HTML is not compiled into any other form before the browser parses it and displays the result (it is interpreted, not compiled). The syntax of HTML elements is much clearer than that of "real programming languages" such as Rust, JavaScript, or Python. The way browsers read HTML is more tolerant than programming languages that interpret their code more strictly. This is both bad and good.

Tolerant code

So what does tolerant mean? In general terms, when you mess up your code, there are two types of errors you'll encounter:

Syntax errors: These are spelling errors, as was the case above in the Rust example. These are usually easy to fix, as long as you are familiar with the syntax of the language and what the error messages mean.
Logic errors: These are errors that appear when the syntax is correct, but the code does not fulfill its purpose, that is, the program does not execute correctly. These are more difficult to correct than syntax ones because there are no messages indicating where you made a mistake.

HTML does not suffer from syntax errors because the browser reads the code tolerantly, in the sense that pages can be rendered even if syntax errors are present. Browsers have built-in rules for interpreting misspelled markup, and you can run something even if you meant something else. This can be a real problem!

On a note: HTML is readable because when the web first appeared, it was decided to allow people to publish content even if the code was incorrect, since this is much more important than making sure that the syntax is absolutely correct. The web wouldn't be so popular today if it were strict with newcomers.

Active Learning: Introducing Tolerant Code

Time to explore the nature of tolerant code in HTML.

HTML Validation

From the example above it is clear that it is worth checking the validity of HTML. In the simple example above, you can simply go through the entire code and find errors, but what about huge, complex pages?

It is best to check the page in a markup validation service. It was created and maintained by the W3C, an organization that deals with the specifications of HTML, CSS and other web technologies. The service will check your HTML and generate a report on errors in it.

HTML can be checked at the address by downloading the file or simply copying it to the page.

Active learning: Validating an HTML document

Open the markup validation service in your browser.
Switch to Validate by Direct Input mode.
Copy the entire document code (not just the body) and paste it into the input space.
Press Check.

You will see a list of errors and other information.

Working with Error Messages

It's usually immediately clear what the messages mean, but sometimes you have to work hard to figure out what's going on. Now we will go through all the errors and figure out what they mean. Please note that the messages indicate the line and column of code to make errors easier to find.

"End tag was implied, but there were open elements" (2 instances): There is no explicit closing tag, although the browser can guess where it should be. The message points to the line after the one where the closing tag was expected, but you will find the right place.
"Unclosed element strong": This is very simple mistake- element) indicates that its content is of great importance, seriousness or urgency. Browsers typically display content in bold."> is not closed and the message points directly to the opening tag.
"End tag strong violates nesting rules": The element is nested incorrectly - there is no matching end tag at this level.
"End of file reached when inside an attribute value. Ignoring tag": Mysterious message. The fact is that somewhere (most likely, at the end of the document) an element property was written incorrectly, and the end of the file ended up inside this property. The link is not visible in the browser - most likely the problem is near it.
"End of file seen and there were open elements": The file has ended, but some elements are not closed. The message indicates the end of the file, in this case the element is not closed example: link to Mozilla homepage ↩

↩ ↩

Quite often, users may observe a situation where a script error message appears in the browser (IE). If the situation is isolated, then there is no need to worry, but when such errors become regular, then it is worth thinking about the nature of the problem.

A script error in Internet Explorer is usually caused by the browser not properly processing the HTML page code, the presence of temporary Internet files, account settings, and many other reasons, which we'll talk in this material. Methods for solving this problem will also be discussed.

Before you begin with the common methods for diagnosing Internet Explorer problems that cause script errors, you need to make sure that the error is not just occurring on one specific site, but on multiple web pages at once. You also need to check the web page where this problem occurred under another account, on a different browser and on a different computer. This will allow you to narrow down the search for the cause of the error and exclude or confirm the hypothesis that the 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 scripts, ActiveX and Java controls 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. To ensure that script errors are occurring for this reason, you simply need to reset your browser's security settings. To do this, follow the following recommendations.

Open Internet Explorer 11
Service

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

Internet Explorer temporary files

Every time you open a web page, the Internet Explorer browser 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 may appear. Regularly cleaning out your temporary files folder may help resolve this issue.
To delete temporary Internet files, follow these steps.

Open Internet Explorer 11
Service
In the window, go to the tab Are common
In chapter Browser history click the button Delete…

In the window Deleting review history check the boxes next to the items Temporary Internet and Website Files, Cookies and website data, Magazine
Click the button Delete

Operation of antivirus software

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

Incorrect processing of HTML page code

It usually appears on one specific site and indicates that the page code is not completely 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 top corner of the browser (right), 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, which 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.

On this moment There are a large number of different browsers that support existing HTML standards to varying degrees. Personally, I prefer the browser from Mozilla Corporation. This browser has a long history (it is based on the famous Netscape Navigator browser). I also like this browser because it supports a system of plugins - separately distributed add-ons, when connected, you can change the functionality and customize it to suit your needs. And finally, this browser is freely distributed and open source, which is also important. Therefore, I decided to describe the capabilities that this browser provides not only to the user, but also to the developer of Web pages, how easy and convenient the process of debugging written products can be.

Mozilla Firefox is one of the most popular browsers among developers and web-developers. It attracts their attention because of the opportunities that this browser provides for debugging created projects, fixing errors, and improving them. The standard browser package includes a java console (or “error console”). This utility allows you to debug built-in java-script scripts. But much more functionality is provided to the browser by third-party plugins, which can be downloaded and installed from the official website of the Mozilla Foundation. Now I want to look at two of these plugins - Web Developer and Firebug. Both of these addons can be downloaded from the above links from the official addons website. After installing them and restarting the browser, the developer has a wide range of possibilities, which I will describe below, in turn for each of the plugins.

Firebug plugin

As stated on the official page: “Firebug integrates with the Firefox browser to greatly enrich the developer toolkit. You'll be able to edit, debug, and examine CSS, HTML, and Javascript live on any web page." And indeed it is. Let's look at some of the functions of this plugin, namely:

Viewing and editing HTML.
Building CSS.
Network Request Monitoring
Debugging JavaScript
JavaScript Research
Logging for JavaScript

This is not a complete list of all its capabilities. Since the project is open source, anyone can change and add functionality.

To work with the plugin, you must press the F12 key (Ctrl-F12 to work with it in a separate window). After a successful launch, we get the following - Figure 1a, 1b.

Figure 1a. The initial window of the firebug plugin.

Figure 1b. The initial window of the firebug plugin.

Next, the actual work with the plugin begins. Let's say we need to find this or that object in the HTML code, or determine how exactly it is implemented with using CSS current fragent. To do this, you simply need to select the necessary options in the plugin window menu with the mouse. The example below is HTML in Inspect mode. Now, going to the document page, under the mouse cursor we will notice a rectangular area, illustrating the area with which we are working. In the plugin window we will see the HTML and CSS parameters that are used. Also, by clicking on each of them, you can make changes and track them over time. The described actions are illustrated in Figures 2,3,4.

During the development of this project, the plugin described above was used precisely for these purposes. However, although no java script was used here, the firebug plugin can be used to debug it as well. An example of debugging is shown in Figure 5.

As described above, the functionality of this extension is not limited to this. You can study it in full and use it for your needs by downloading it from the links provided, after installing Mozilla Firefox.

Web Developer plugin

Web Developer is the second extension for Mozilla browser Firefox is very powerful and functional, allowing for fast and efficient debugging. After installing it, an additional toolbar will appear in the browser window, shown in Figure 6.

Further work with the plugin is intuitive. For example, if we need to do some CSS work (though not as fully functional as the Firebug plugin), we can click the CSS menu and lock, enable, or disable.

It is very convenient for the developer to be able to see how his project will look on monitors with different resolutions. To do this you need to use the Resize tab. Here you can manually set necessary permissions screen (800x600, 1024x768, etc.), and then freely switch between them, zoom in or out of content. This functionality is depicted in Figure 7.

This extension also has rich functionality, which is all described and available on the official websites.

List of sources used

1. www.getfirebug.com
Official website of the add-on.
2. http://addons.mozilla.org
The official website of Mozilla, where plugins for Firefox browser, information for developers, information on using plugins.
3. http://chrispederick.com/work/web-developer/
Official website of the plugin developer WebDeveloper.

While browsing the Internet, Internet Explorer may display messages indicating that the page contains errors and may not display correctly. Let's look at several ways to fix this problem.

Instructions

Internet Explorer may not be blocking the active scripts, Java, and ActiveX that control how information is displayed on the page when you view pages. To fix the problem, you need to reset your browser security settings. To do this, in the “Tools” menu, select “Internet Options” and go to the “Security” tab. Click the "Default" button and then "OK." If after re-running the page where the error occurred the problem remains, try the next method.

Quite often, users may experience a situation where a script error message appears in the Internet Explorer (IE) browser. If the situation is isolated, then there is no need to worry, but when such errors become regular, then it is worth thinking about the nature of the problem.

A script error in Internet Explorer is usually caused by the browser incorrectly processing the HTML page code, 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 discussed.

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

Blocking Internet Explorer active scripts, ActiveX and Java

Open Internet Explorer 11
Service

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

Internet Explorer temporary files

Open Internet Explorer 11
In the top corner of the browser (right), 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 Are common
In chapter Browser history click the button Delete…

In the window Deleting review history check the boxes next to the items Temporary Internet and Website Files, Cookies and website data, Magazine
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 for saving temporary browser files. In this case, you need to refer to the documentation for the installed anti-virus product and disable scanning of folders to save temporary Internet files, as well as blocking of interactive objects.

Incorrect processing of HTML page code

Open Internet Explorer 11
In the top corner of the browser (right), 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.

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

Firebug for Firefox

I don't know for sure whether it is FireBug The ancestor of other developer tools, but it is definitely the most popular, convenient and functional in .

Firebug is an add-on for Firefox, which means you need to download it from the Firefox add-ons website and install it.

To trigger a firebug, just press F12.

Features of this add-on:

Inspecting and editing dynamically changing HTML;
On-the-fly CSS editing;
Debugging JavaScript, command line for executing scripts;
Monitoring network requests - you can see the sizes and download times of files and scripts, request headers;
DOM parser.

You can talk for a long time about these possibilities in detail, but I think that all our readers know them, and if not, detailed information is on the Firebug home page or the same thing in Ilya Kantor’s translation.

In addition to the firebug itself, you may need a useful add-on to it - FireCookie, with which (surprise:-) you can view and change cookies.

WEB Developer Toolbar for Firefox

Another useful addition to Ognelis. It looks like this:

Let's look point by point.

Disable

Allows you to turn off JavaScript, disable the use of the cache, which is very useful during development (allows you to be sure that the page has 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 referral was made) ).

Cookies

A useful option for working with cookies: you can view, delete, deny and add them.

CSS

Forms

Images

There is a useful feature to disable images - to see what your site looks like without images. You can circle pictures, show their sizes, and show alt attributes.

Information

Miscellaneous

Outline

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

View Source

View source code. Possibility of viewing in an external application, viewing the generated code.

I like the one in the right corner the most. It is a fast HTML, CSS validator and JavaScript error indicator. If there are no problems, the icon is green, and if there are problems, the icon is red.

Internet Explorer Developer Toolbar

Starting from 8.0, error debug is already built into this browser. It can be easily called F12 key. True, it’s as poor as a program from the 90s.

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

As in firebug, it is possible to inspect an element with a simple click. But, if in we can immediately see padding and margins, here there is no such opportunity.

The best part: there is a built-in color picker, which allows you to get any color from the page using a pipette. (there is a separate ColorZilla plugin for ff).

Debug DebugBar for Internet Explorer

DebugBar for Internet Explorer can be downloaded from the given link.

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

In addition, there is an inspector:

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

I’ll warn you right away that DragonFly is in the Alpha2 stage, this explains many of its glitches.

Features list:

DOM inspector;
Inspect by click (again, we won't see indentation like in FireFox);
Editing ;
Quick access to the error console.

Debug WEB Inspector in Safari

I’ll say right away that it’s about the browser Safari I missed the information, so I am not responsible for the adequacy of the material, as they say.

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

In the “Development” menu the following functions are available to us:

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

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, a function such as “Network Timeline” is available (the “Network” button in the inspector):

You can clearly see when and how long it takes to download files. You can also view request headers, but, unfortunately, you cannot view the content itself.

Debug for developers in Google Chrome

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

DOM Inspector;
javascript debugger;
JavaScript Console.

In order to inspect any element, you need to right-click on it and select “View element code” in the context menu:

In the “Resources” tab we can see the following:

In this article, I looked at the most famous browser extensions and built-ins.

There are others, for example:

Internet Explorer WEB Development Helper - a good assistant 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 they should, or there are functions for the mentioned extensions that I missed, please write.

Enjoy it for your health!

Internet Explorer 11 on Windows 8.1 and Windows 7 comes with a completely redesigned and improved set of developer tools built into the browser to help developers build, troubleshoot, and optimize the experience of modern websites and apps across multiple devices. The new tools, which we simply call F12 for brevity, enable web developers to work quickly and efficiently.

The Visual Studio and Internet Explorer teams worked together to create F12 tools, which are built on the principle of helping developers quickly move from problem to solution using meaningful data. The new F12 suite delivers a fast, flexible web experience with tools to diagnose and fix performance problems, as well as tools to help you better understand how Internet Explorer layouts and renders web applications. F12 tools support the fast, interactive workflow used by modern web developers.

Universal set of tools

The new F12 kit helps developers quickly move from problem to solution. Some exciting new features include:

UI responsiveness and memory profiling tools to help developers create fast, responsive web applications.
Live DOM Explorer and CSS checker that update with the page so developers can interactively explore how dynamic content affects markup and styling
Enable JavaScript debugging to run quickly without page refresh, so developers can get started faster

As you use F12 tools, you'll notice many other improvements that will help you achieve a fast, interactive workflow:

Quickly access these tools by right-clicking a menu item using the "check item"
Effective keyboard interaction
Extensive ability to copy elements and components from tools, so they can be pasted into any editor without additional formatting

The most important thing is that these tools now display the most complete and accurate information - from the @media and!important rules in DOM Explorer to the elemental cost structure in the UI Response Profiler. These tools also provide directly relevant data; for example, the memory profiler identifies DOM nodes that are "live" but not referenced from the markup or rendering tree.

The new F12 suite extends the capabilities of Visual Studio to provide developers with a consistent, seamless experience across all of our web development tools and frameworks.

Let's now take a quick look at these tools in action.

Profiling Applications with the UI Response Analyzer

UI Response Analyzer helps you understand exactly where CPU time is being spent so your application can reach its full performance potential. This tool gives you essential insight into the inner workings of Internet Explorer, providing run-time visualization of HTML, CSS, and JavaScript code, as well as important associated effects such as markup and garbage collection. At a glance, you can see exactly how fast your app is responding and rendering. This will allow you to identify specific sources bottlenecks and take a more meaningful approach to its optimization.

Website Profiling

Analyze application memory usage with Memory Profiler

This memory analyzer will help you avoid memory leaks or excessive memory consumption. Creation of web applications that work for clients around the clock, or complex interactive applications often means that their designer must pay special attention to memory usage issues.

Although JavaScript is a garbage-collected environment, applications typically consume more memory simply because object references have not been (and cannot be) deallocated. A memory analyzer can help you identify these problems by providing information about every object on the page, whether it's a JavaScript object or a DOM object. With this information you can, for example, see how much memory is held by an element and which objects support its preservation. But most importantly, you can compare two snapshots and see what has changed. This will allow you to understand why your application is using more memory and fix it.

Heap memory snapshot showing disabled DOM elements

Quickly understand application performance issues with the Performance Dashboard

To help you quickly identify issues affecting your page's performance, Internet Explorer 11 includes an on-page widget called the Performance Dashboard, which can be accessed using Ctrl+Shift+U or the Tools menu item ( Alt+T). This panel dynamically displays statistics in Internet Explorer for key performance metrics such as rendering time, memory, frames per second (fps), and CPU usage. The performance dashboard does not require the use of F12 tools and can also be used in modern browsers.

With the Performance Dashboard, you can quickly identify page interactions that are causing framerate stutters or high CPU usage. You can then switch to the F12 tools to reproduce the problem and find a solution for it.

Inspecting elements and changing markup and styles using DOM Explorer

DOM Explorer makes it easy to interactively configure @media queries and CSS rules and their properties. That's why user interface your app becomes a highly efficient, responsive, multi-device experience. You can quickly get started on a web page by right-clicking and inspecting the element you want, which triggers F12 tools along with that element selected in DOM Explorer, dynamically displaying the DOM and CSS rules applied. The rendered DOM and CSS tables are dynamic, allowing you to understand how Internet Explorer interprets your markup, styling, and CSS rules. As you interact with the page or change it using DOM Explorer, the changes you make will be reflected immediately.

Checking Markup and Styles

When making changes to a CSS table, DOM Explorer makes it easy to get the correct value of a property or properties using IntelliSense. You can easily see which properties are wrong or unrecognized, and then copy the rule to reapply it to your source.

Debugging JavaScript using a debugger and console

The new JavaScript debugger gives you the tools to locate and quickly fix broken code. The JavaScript debugger can open and inspect multiple files, even if your script library has been minified, set breakpoints and traces, inspect JavaScript objects, values, scope chains, and view the contents of the stack. When you run the F12 tools, the JavaScript debugger will also launch immediately, so you can get started right away

When debugging, you'll probably want to get some interaction with your website. The console is the key tool to accomplish this task. You can access the console at any time, which makes using this interactive environment with IntelliSense and object visualizers efficient. The console also provides a wide range of specialized APIs, allowing you to log output, analyze the amount of time spent in specific code, and provide object renderers when you need to perform in-depth inspection of JavaScript objects.

Summing up

This blog post simply provides a sketch of the new elements in F12 tools. you can find full list new functionality, available to developers in Internet Explorer 11 in the article "What's New in F12 Tools" and in the "Internet Explorer 11 Preview Developer Guide." You can also learn more in the Internet Explorer test demo, "F12 Adventure".

We look forward to your feedback and look forward to a long relationship with the developer community. Share your suggestions through the Internet Explorer 11 Feedback and Suggestion tool or on the Connect site.

PJ Hough
, Vice President, Visual Studio

Popular in the category: