How to turn off friendly error messages in Microsoft Edge

Question

I am trying to debug a crashing application in Microsoft Edge, but it gives the friendly error page:

This page is having a problem loading

We tried to load this page for you a few times, but there is still a problem with this site. We know you have better things to do than to watch this page reload over and over again so try coming back to this page later.

In internet explorer there is a way to turn off the friendly error messages. Is this also possible in Microsoft Edge? I'd like to know on which line of code the problem occurs.

Answer 1

It seems there are none at the moment. You can use the F12 developer tools for debugging though. The friendly page includes the actual HTTP response code so you can have an idea. Also, if you require more details you can check the full details on the request/response using the F12 Network tool to get the data the server is responding with.

Answer 2

You are probably affected by this unclosed bug.

No easy way to fix it right now, the not friendly error message will probably not help much (as you are not getting a server side HTTP error, is just the browser that raise an error and truncate the communication).

On the other hand the developer tool will not help also: Edge "smartly" close automatically it when the error happens and if you reopen the history is empty (no way to keep it, tried all of the buttons).

I have this issue on a site I'm developing but I'm not able to understand what's happen.

EDIT - after a long time I fixed this issue in my environment. Unluckily I'm pretty sure this will not help too much other devs because the bug seems to happen for a lot of different reason, but still... that's my usecase.

What was freezing my site was a combination of CSS media-queries (follow the less used):

@media (min-width:calc(@screen-mobile-size + 1px)) {
  .hero_mobile {
    display: none;
  }
  .hero_desktop {
    display: inline;
  }
}

...and few lines below...

@media (max-width: @screen-mobile-size) {
  height: auto;
  max-height: 600px;
  .hero_mobile {
    display: inline;
  }
  .hero_desktop {
    display: none;
  }
}

I tested a lot of combination but there's only one rule: I can't provide both media queries, it doesn't matter what there's inside them! It simply break the browser.

In my case the fix was quite easy: just preventing the first CSS rule to be embedded inside a media query, so...

.hero_mobile {
  display: none;
}
.hero_desktop {
  display: inline;
}
// ...
@media (max-width: @screen-mobile-size) {
  height: auto;
  max-height: 600px;
  .hero_mobile {
    display: inline;
  }
  .hero_desktop {
    display: none;
  }
}