I need to investigate the reason behind the Edge Developer Tools appearing blank on our company's ASP.NET WebForms website. How can I determine the root cause of

Our current ASP.NET WebForms site relies on Microsoft Edge to function properly due to the way numerous links open in popup windows. Although a complete rewrite is necessary, this project has not yet been allocated resources for approval.

Recently, I discovered how to utilize a timer to update Page 1 whenever a dialog from Page 2 triggers a third dialog on Page 3, which then sets a Session variable that Page 1 monitors.

This snippet shows my implementation on Page 1:

<form id="Form1" method="post" runat="server">
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            setTimeout(function () {
                var csrWhere = '<%=Session("csrWhere")%>'
                if (csrWhere != '') {
                    alert(csrWhere);
                    location.reload();
                }
            }, 200);
        });
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

However, I encountered an issue where Developer Tools opens as expected but displays a blank page:

https://i.sstatic.net/KPEEgsKG.png

In contrast, performing the same action on another PC with the same browser reveals that Developer Tools functions normally:

https://i.sstatic.net/WiZkSKrw.png

The anomaly perplexes our two developers as they suspect it may be caused by outdated third-party DLLs like Telerik or an older JavaScript library used in the website project.

If anyone can provide insight into what might be impeding Developer Tools, it would be greatly appreciated.

Update
After inspecting the Web.config file, I found the following section:

<authorization>
    <allow roles="VistaUser" />
    <deny users="*" />
</authorization>

I am considering whether granting access to the Visual Studio Debugger role could resolve the issue. However, I need to confirm the role's exact name before testing this theory.

Answer №1

It appears that there is an issue with Developer Tools on the website.

Surprisingly, you may not realize that you are actually running this page in Internet Explorer mode, as indicated by the IE icon in your address bar: https://i.sstatic.net/bNq44WUr.png

Unfortunately, the Chromium DevTools do not function properly in IE mode. To debug the content of a tab in IE mode, you can use IEChooser to access Internet Explorer DevTools:

  1. On Windows, open the Run dialog by pressing Windows logo key + R.

  2. Type %systemroot%\system32\f12\IEChooser.exe and click OK.

  3. Select the entry for the IE mode tab in IEChooser.

If you are wondering why you are in IE mode, it is likely configured by your company for legacy application compatibility reasons. If you would like to switch out of IE mode for this particular application, please contact your administrator for assistance.

Answer №2

When using an update panel, it's important to open the developer tools (F12) in your browser BEFORE the page loads.

If you navigate to a different page without opening the developer tools first, simply open them, refresh the page, and then click on buttons as needed.

I recently discovered a method to update Page 1 when a dialog on Page 2 triggers a third dialog on Page 3. Page 3 sets a Session variable, which Page 1 can detect.

However, I don't recommend attempting this hacky design. It may not be stable or reliable, especially if the user opens multiple tabs.

Instead of traditional popups, consider using a custom popup utility like AjaxToolKit dialog or creating your own dialog control (ascx) for a more seamless experience across pages.

For popup dialogs, jQuery.UI is recommended over other options like bootstrap due to its smoother functionality and bypassing of popup blockers with fake popups created using standard HTML markup.

For example, when confirming a delete action with a button click, a popup could be triggered to prompt the user before proceeding:

        <asp:Button ID="cmdDelete" runat="server" Text="Delete"
            OnClientClick="return mydelete(this);"
            OnClick="cmdDelete_Click"
            CssClass="btn myshadow"
            />
        <br />
        <br />
        <br />
        <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>

        <div id="mypopdiv" style="display:none">
            <h3>Delete this record</h3>
            <h4><i>(this can't be undone)</i></h4>
        </div>


    <script>
        var mydeleteok = false
        function mydelete(btn) {

            if (mydeleteok) {
                mydeleteok = false
                return true
            }
            myDialog = $("#mypopdiv")
            myDialog.dialog({
                title: "Delete ?",
                modal: true,
                sizable: true,
                width: '300',
                appendTo: "form",
                closeText: "",
                dialogClass: "dialogWithDropShadow",
                position: { my: 'left top', at: 'right bottom', of: btn },
                buttons: [
                    {
                        id: "mydel",
                        text: "Delete",
                        class: "btn myshadow",
                        click: function () {
                            myDialog.dialog('close')
                            mydeleteok = true
                            $(btn).click()
                            return
                        }
                    },
                    {
                        id: "Cancel",
                        text: "Cancel",
                        class: "btn myshadow",
                        click: function () {
                            myDialog.dialog('close')
                        }
                    }
                ]
            })
            return false
        }
    </script>

This setup allows the server-side code to execute only upon user confirmation.

https://i.sstatic.net/LR8L9pId.gif

Using jQuery.UI dialog provides a simple yet effective way to handle popups and conditional button clicks in your web applications.

Consider implementing a similar dialog system for editing tasks instead of relying on complex session-based approaches, as it offers greater flexibility and maintainability in your codebase.

https://i.sstatic.net/fz0k8yZ6.gif

By adopting a structured dialog control method, you can streamline user interactions and enhance the overall user experience on your website.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Selenium to interact with textfields and simulate triggering events, replicating human-like behavior

Currently, I am facing a challenge in testing a webpage using Selenium which has been developed using AngularJS. This particular webpage contains text fields that users need to fill out. As the user starts typing in these text fields, AngularJS captures ea ...

Locating elements in Angular 2 using QueryList's find method

There is a component containing the following: @ViewChildren(MyDirective) factories: QueryList<MyDirective>; Searching for an element in the QueryList works fine: ngAfterViewInit() { let field1 = this.factories.find(factory => factory.meta. ...

What is the best way to transfer a variable from an @Input property to a service within an Angular2 component?

I'm tackling what seems like a simple task, but I'm struggling to figure it out. My issue is this: How can I successfully pass a variable from @Input to a service in an Angular2 component? (Code has been simplified) This is my current component ...

What is the process for generating a watermark directive in angularjs?

My application utilizes a jQuery script for watermarking textboxes. I created a directive to easily apply this watermark to input elements, but it's not functioning as expected. While debugging, I can see the watermark being added, but once the UI fin ...

Obtaining the top 5 elements with UnderscoreJS using the _.each function

I have an array of objects and I am able to access the properties of each object using the _.each method, which is working perfectly. var x = [{id:1, name:"xyz"},{id:2, name:"pqr"},...and so on] Currently, I am accessing them using the _.each method as s ...

An exception has occurred in the OpenQA.Selenium.WebDriverException

Hi, I have been working on a C# Windows Form application that utilizes Selenium to open Edge browser. It was working fine before, but suddenly after months, I started encountering this error: An unhandled exception of type 'OpenQA.Selenium.WebDriverE ...

React Native bug: For Loop displaying only the initial element in the Array

I'm currently working on a function that is meant to iterate through 20 elements of an array called smn to display the elements that meet a specific condition. However, with my current code, I am only able to display the first element in the array: ...

What is the best way to terminate a "for await ...of" loop if it fails to finish within a specified timeframe?

Is it possible to stop an asynchronous loop if it doesn't finish within a set time frame? I'm working with the following code: (async()=>{ for await(let t of asynDataStreamOrGenerator){ //some data processing } //some other code I n ...

Ways to selectively implement the callback of setState using hooks in specific locations, rather than applying it universally

There are times when I need to set a state and perform an action afterwards, but other times not! How can I achieve this using hooks? Sometimes, I want to call a function or do something after setting the state: this.setState({inputValue:'someValue& ...

Navigating a JSON hierarchy in Node.js

I have a json file that needs to be parsed to identify its structure. Below is the code snippet I tried using: var fs = require('fs') var reqTemplate; var obj; fs.readFile('SampleData.js', 'utf8', function (err, data) { i ...

What is the method for opening the command prompt while initializing a node.js server?

I've successfully set up a node.js server and now I'm looking to send a command to the prompt upon startup. This is something I couldn't manage while the server was already running. Should I be implementing this from within the server.js fi ...

Create a line connecting two divs using jQuery's DOM manipulation capabilities

Looking to connect two divs with a straight line, I stumbled upon jQuery DOM line, which appears to offer a more streamlined solution compared to jsPlump. I attempted to incorporate it into my code, but unfortunately, it's not working as expected. Be ...

Guide on invoking a custom JavaScript alert box using PHP

Recently, I decided to enhance the appearance of my pop-up boxes on my website. After researching online, I found some attractive JavaScript libraries like Alertify, BootBox, among others. Excited about the possibilities, I included their JS and CSS files ...

Setting default values for JSON objects by analyzing the data of other objects within the array

I've been grappling with this issue for about 6 days now, so please bear with me if my explanation is a bit convoluted. I'm using NVD3 to showcase graphs based on data retrieved from BigQuery. While the data and graph setup are correct, the probl ...

Encountering a NextJS error with head component

Trying to incorporate the head element into a NextJS page format has proven challenging. Despite consulting the official documentation, implementing next/head to add <head> has resulted in an error within the code block. Code: import Head from &apos ...

Printing from the server-side using ASP.NET MVCLearn how to implement server-side printing in

Exploring the world of ASP.NET and programming for the first time has been an exciting journey for me. I recently developed an ASP.NET MVC web application hosted on Azure for a store where salesmen input sales information. My goal is to have a printer co ...

Update Language Selection dropdown menu with country codes and more

Currently, I have a dropdown list containing country codes and names sorted alphabetically. My goal is to change the language of each page based on the selected item in the dropdown list. I am using the RegionInfo TwoLetterISORegionName object correspond ...

ASPxGridView - Upon submitting changes, I consistently observe them displayed as one edit prior

I am facing an issue with the GridView on my WebForms page. I am using a Grid that is bound by a LinqDataSource connected through Entity Framework to a SQL Server view. This view aggregates data from one of the tables, and I allow users to make changes to ...

SweetAlert: The title argument is not present

I encountered an error when the error function is triggered from sweet alert. How can I resolve this issue? Appreciate any help! SweetAlert: Missing "title" argument! Here is my JavaScript code: function DeletePost() { swal({ title: "Are you ...

Which is better to test: JavaScript or TypeScript?

As I delve into TypeScript, I find myself in a conundrum. In my JavaScript days, I relied on Jest for testing. Now that I'm working with TypeScript, I've come across ts-jest. But here's the thing - do I actually need it? After all, my TS cod ...