Using Eclipse PDT for debugging Ajax pages with concurrent requests - ajax

Once I asked this same question but now I can give a test case for it.
The problem resides in debugging in Eclipse PDT when the page sends multiple requests to the server's dynamic pages. Consider a web page as follow:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="link-to-jquery/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
var list = $("ol");
for (var i=0; i<20; i++) {
list.append($('<li><img src="/img.php?'+i+'" /></li>'));
}
});
</script>
</head>
<body>
<ol>
</ol>
</body>
</html>
In above page, JQuery is used only to prevent browser from caching the images. And the the img.php reads like this:
<?php
readfile('some_image.jpg');
When I try to debug the first page in the Eclipse PDT, using Zend Debugger, only the first img.php request is made and others are dismissed. A sample output is shown in the attached image file. In the presented case, not loading an image file won't prevent you from debugging the rest of project. But once there's a javascript file which isn't loaded because of this problem, the rest of project won't work as it has to. Does anyone know how can I debug such a page?
Here are my specifications:
PHP Version 5.3.14
Zend Debugger v5.3
Eclipse for PHP Developers, Version: 3.0.2
Apache/2.2.22 (Ubuntu)

I found that this problem is specific to Zend Debugger and XDebug works smoothly.
+1 for XDebug, -1 for Zend Debugger

Related

How to Stop Chrome Caching During Visual Studio Blazor Wasm App Debugging

I am using a small Blazor Wasm app to learn web programming. In particular, Visual Studio Community 2019 v16.6.2 with AspNetCore v3.2.0 and Chrome v83.0.4103.116. There are times when changes I make to my code (JavaScript and Blazor) aren't applied when I run the debugger, unless I do a Hard Refresh. I have set 'Disable cache' in the Network portion of the Chrome DevTools, but it doesn't remain set between debugging sessions. Having to do a Hard Refresh each time I debug just in case is of course a big pain. Any idea what I can do to prevent caching under these circumstances?
Short answer
At the beginning of your index.html file, before any Blazor initialization, write a Javascript method call that clear the Blazor cache:
<script type="text/javascript">
caches.delete("blazor-resources-/").then(function (e) {
console.log("'blazor-resources-/' cache deleted");
});
</script>
By doing this, the Cache Storage will be cleared at each page load, just before the Blazor initialization.
Full answer
I think it is better to control the behavior of this depending the context.
For a basic if in Debug or Release configuration, assuming that you are hosting your Blazor WASM application on ASP.NET Core, here are the steps:
Copy your index.html file from your Client WASM project on your Server project, in a Pages folder you may have. In my case, i have copied it in ./Pages/
Rename the file to _Host.cshtml or something suitable for you.
Open this new file. We will now state in it that this is the root page if this page come from a routing context, and we will add our clear cache logic depending we are actually in Debug mode or not. You file content may look like this:
#page "/"
#{
Layout = ""; //Force no Layout
bool clearCache = false;
#if DEBUG
clearCache = true;
#endif
}
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>MyProject</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="Beeworking.Client.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
#if (clearCache)
{
<script type="text/javascript">
caches.delete("blazor-resources-/").then(function (e) {
console.log("'blazor-resources-/' cache deleted");
});
</script>
}
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
Now in your Startup.cs file in your Server project:
Change:
endpoints.MapFallbackToFile("index.html");
To:
endpoints.MapFallbackToPage("/_Host");
If it don't work, you may have to specify the root search path for Razor views. In ConfigureServices, change AddRazorPages to something suitable on your current configuration to find your starting view:
services.AddRazorPages(options => options.RootDirectory = "/Pages");
That's it ! . If everything goes right, your Blazor WASM index page will now be the CSHTML one at boot, and because we condtionnally inject the clearing cache code, the cache will be cleared at every page load, but the behavior will not be present when the app will be published or built in Release configuration mode.
After publishing there is a file at wwwroot/_framework/Blazor.boot.json
Change cacheBootResources to false.
{
"cacheBootResources": false
...
Clear your cache on the client browser.

D3 error in ASP.NET Web Forms using IE 11

I am trying to use D3 library within an ASP.NET web forms application. The app works fine in Google Chrome but throws an error in IE 11.
Default.aspx Code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v4.min.js"></script>
<!-- https://d3js.org/d3.v4.min.js -->
</head>
<body>
<div>Hello World! </div>
<script> alert(d3.select("div").text()); </script>
</body>
</html>
Error: JavaScript runtime error: 'd3' is undefined
Do I need any additional libraries to make it work in IE11?
IT may be security restrictions that prevent IE browser from downloading the D3 script. What you can do is to download the scripts, place them in the same folder as your files and change the referenced paths in your source.
I downloaded the d3.js file to my ASP.NET project from your reference and add it to the page.
I had tested it with IE 11 and it is working fine without any error.
Reference:
d3 is not defined - ReferenceError

CKEditor Stylesheet Parser

I am working with CKEditor 4.4.5 and its plugin Stylesheet Parser 4.4, but I get empty list from the style drop-down.
To make my question easier to understand, please try this code (download from its example site: http://sdk.ckeditor.com/samples/styles.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Stylesheet Parser plugin</title>
<script src="http://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor2" name="editor2" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor2', {
extraPlugins: 'stylesheetparser',
height: 300,
// Custom stylesheet for editor content.
contentsCss: [ 'http://sdk.ckeditor.com/samples/assets/stylesheetparser/stylesheetparser.css' ],
// Do not load the default Styles configuration.
stylesSet: []
} );
</script>
</body>
</html>
It doesn't really work. But the sample on that site works well.
I also find another sample site:
http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/stylesheetparser/stylesheetparser.html
I tried to copy all the sources code from this demo site, but get no luck.
Did anyone else have the same problem?
How can I make the codes above work? It basically uses the source codes from CDN site so I don't think the version of source code matters.
You should try with this version: http://ckeditor.com/addon/stylesheetparser-fixed
The official plugin has some problems since very long ago but they don't seem to plan to fix them.
This problem is caused by Cross-domain request. The CSS file is in HTTP server, and my application is running with a port number. So they are treated as cross domain request.
I also tested the HTML page and CSS file in the local files. However, file://...path is still treated as Cross Domain request in Chrome, but FF and IE works with that properly though.
When I tried this in server, it works properly with Chrome. Unfortunately, there seems no way to make cross domain request work in Chrome and Firefox.

localhost issue on page refresh, blank page

I am working locally on a PHP site. I am on a Mac OS X Yoesmite and have setup Apache. But sometimes when i refresh the page it doesn't load, so I have to refresh the page again and again until it randomly loads my site again. When it doesn't load and I view the source it looks like this...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ERR_DNS_FAIL -->
</body>
</html>
Anybody know why this is happening or how I might go about fixing it as it's very annoying when trying to build a site and you have to keep refreshing the page until it loads.
I know(pretty sure) what was causing this issue now. I switched browsers developing because I noticed it was only happening in Chrome, so I was using Firefox. But then when I installed "Zapyo" browser extension in Firefox(I already had it in Chrome) the same thing started happening. So I just disable this plugin when developing.
So nothing to do with Apache configuration.

Debug gwt from inside iframe (X-Frame-Options)

When I try to debug my gwt app that's inside an iframe (note that gwt codserv and webserv are all local) I'm having permissions issues. The following errors are thrown:
on Chrome console: "Refused to display document because display
forbidden by X-Frame-Options.";
on Chrome webpage window: "Plugin
failed to connect to Development Mode server at 127.0.0.1:9997 Follow the underlying troubleshooting instructions"
This ONLY happens in Google Chrome, firefox and IE are ok.
I've already searched for simillar problems but all of them are on crossdomain context, and mine is local. Also, tried the proposed solutions but all without success.
Here is an example of my webpage containing my iFrame. I can't debug MyGWT app.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<iframe src="MyGWT.html?gwt.codesvr=127.0.0.1:9997"></iframe>
</body>
</html>
The page that's being blocked is probably TroubleshootingOOPHM
FYI, this has been fixed in GWT 2.5, which now links to this page rather than trying to display it in an iframe (moreover underneath the error glasspane, which made it hardly readable anyway before Google changed their server settings)

Resources