c# Blazor WASM Javascript not showing in debugging - javascript

I have a WASM project. I have a site.js file in the wwwroot/js folder.
I already had a javascript function here and it works fine.
I added two new functions:
function LoadLog(logValue) {
logTa = document.getElementById("logTextArea")
logTa.value = logValue;
ScrollLogToBottom()
}
function ScrollLogToBottom() {
logTa = document.getElementById("logTextArea")
logTa.scrollTop = logTa.scrollHeight;
}
The WASM project would error out when calling these functions, and I went into debug mode.
When I looked at the site.js file - these functions were not present. The other function was present, but these were not. The file is saved (it saves automatically when you run anyway but I double checked it).
This is the debug view:
This is the file in Visual Studio:
As you can see, the Download file appears in the debugger fine - but the rest...not so much.
Is there something I am missing here?
As a further update - I deleted the Download function. I cleaned my solution. I rebuilt my solution, and then ran the solution.
The DownloadFile function was still in the js file - without the other functions...it appears as if the JS file is not being updated.
Further Further update - I deleted the entire JS folder from the Solution, and from the location on my hard drive.
When I run the Blazor app using the Chrome Extension requirement:
chrome --remote-debugging-port=9222 --user-data-dir="C:\Users.....\AppData\Local\Temp\blazor-chrome-debug" https://localhost:7054/
The JS file is still there....appears that this location is holding onto a version of the WASM application?

For anyone that happens across this.
I ran it in Edge and it was fine - no issues. It appears that Chrome is keeping a version on hand and building the solution from that.
I cleared my cache and tried again, and the functions now work as intended.
However, the debugger still showed the old JS File. It seems you have to clear the cache on the debugger Chrome as well - once this was done, the JS file appeared as updated.

Related

Breakpoints in WebStorm not hitting for JavaScript debugging

I have the following configuration setup in WebStorm:
When I click debug, it launches Chrome fine and navigates to the page, but my breakpoints never get hit. It's connected somehow though because I see all of the console.log() output in WebStorm.
I'm trying to navigate to the URL specified in the screenshot and have breakpoints in main.js get hit, but it doesn't work as expected (see: at all). I'm not exactly sure what I'm missing. I've tried setting a remote URL for the specific main.js file in the Remote URLs section, but that didn't help either.
For reference I run the application via bra run and npm run watch.
Quick Update
So I've been able to actually get a breakpoint to hit, but it's in a different file (in a different path):
../public/app/core/routes/dashboard_loaders.ts allows me to stop at breakpoints, but ../public/dashboards doesn't.
When I navigate to http://localhost:3000/dashboard/script/main.js?orgId=1, it hits the route:
.when('/dashboard/:type/:slug', {
templateUrl: 'public/app/partials/dashboard.html',
controller : 'LoadDashboardCtrl',
reloadOnSearch: false,
pageClass: 'page-dashboard',
})
Which ultimately does load the file ../public/dashboards/multi.js -- but no breakpoints are hit.
Further Updates
It looks like the script is served via the following command (in ../public/app/features/dashboard/dashboardLoaderSrv.js):
/*jshint -W054 */
var script_func = new Function('ARGS','kbn','dateMath','_','moment','window','document','$','jQuery', 'services', result.data);
var script_result = script_func($routeParams, kbn, dateMath, _ , moment, window, document, $, $, services);
Where $routeParams are type:script and slug:main.js - If I step into this function, I get an anonymous(?) file that's identical to my actual main.js file, but the name is like 43550 instead of main.js -- I think this is boiling down to a fundamental lack of knowledge in how JavaScript handles something on my part. :)
Edit: I found this issue for using webstorm with grafana (second edit) looks like this is you.
I think what he linked solves it with declaring a sourceUrl then your file isn't "anonymous" or rather dynamic.
//# sourceURL=filename.js
I.E
//# sourceURL=main.js
Reference How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?
Here is the documentation and video on debugging in webstorm to make sure everything is setup properly. (I.E My default setting were to debug my index file instead of my project). Make sure you have their Chrome extension or Firefox Extension
General JS Debugging in Webstorm
Debugging for Chrome in Webstorm
Debugging for Firefox in Webstorm
Debugging Node.JS in Webstorm

HTML/JS github pages project doesn't load images or sounds when run with firefox

Alright so this is a weird one, I'm not entirely sure if this is the right SE site, but I think it is because it regards web code/browser compatibility. If not, someone tell me in the comments I'll move it.
So basically, I have my game's source code on github. I also am hosting the game itself on github pages. This game should (I believe) function on Firefox and Chrome browsers. The source code has nothing unique to either browser.
The game runs fine on chrome. However, on Firefox this is not the case. None of the assets (images, sounds) are showing up/working on the github pages link. The weird thing is this though: on my local file system, when I open the html file with FF it runs/renders the assets just fine. Also, when I download the zip of my project and try it w/ FF, it also works fine. Why is this the case?
(Note, if you want to see the problem, click on the github pages link, then click on "Start Game", this will open it up to the game where the problem is occuring)
Edit:
Forgot to mention, the error I get in the FF console is NS_ERROR_NOT_AVAILABLE: it leads to line 421 which is this: g2d.drawImage(playerSprite, spriteLoc[0], spriteLoc[1]); where I draw the image onto the canvas. g2d is supposed to be ctx btw, thats a bad java habbit.
try changing the path of the resources.
you call the sound files, and image files this way:
laserSound = new Audio("resources\\Sounds\\laserblast.wav");
playerSprite.src = "resources\\Sprites\\Sprite.png";
you need to change the path to this:
laserSound = new Audio("resources/Sounds/laserblast.wav");
playerSprite.src = "resources/Sprites/Sprite.png";
that is change this \ to this /
the current way you are getting it, Firefox does not find where you files are at.
also, why dont you put init(); at the bottom of the JS file, its just to make sure, that the JS parser already knows that certain functions you will be calling are defined, like update() and initBackground() (this does not seem to be a problem, but just to be on the safe side.)

How do I change the underlying Phantomjs object settings using Chutzpah?

We have some QUnit javascript tests running in Visual Studio using the Chutzpah test adapter. Everything was working fine until we changed our api (the one being tested by the js files) recently, and added some validations over the UserAgent http header. When I tried to update the tests to change/mock the user agent I realized it was not directly possible even by overriding the default browser property.
After a few days of scavenging, I finally found what exactly is happening. Chutzpah is creating a phantomjs page object for the test files to run on. This is being done on a base javascript file (chutzpahRunner.js) located at the Chutzpah adapter installation path. These are the last lines on the file, that effectively start the tests:
...
// Allows local files to make ajax calls to remote urls
page.settings.localToRemoteUrlAccessEnabled = true; //(default false)
// Stops all security (for example you can access content in other domain IFrames)
page.settings.webSecurityEnabled = false; //(default true)
page.open(testFile, pageOpenHandler);
...
Phatomjs supports changing the user agent header by specifying it in the page settings object. If I edit this chutzpahRunner.js file in my machine, and manually set the user agent there, like this:
page.settings.userAgent = "MyCustomUserAgent";
My tests start to work again. The problem is that this is not in the project itself, and thus cannot be shared with the rest of the team.
Is it possible to change the properties of the phantomjs objects created by Chutzpah to run the tests? I'd like to either change them from inside my own tests, or from another script file I could embed on the pipeline.
Without a code change in Chutzpah it is not possible to set those properties on the PhantomJS object. Please file an issue at https://github.com/mmanela/chutzpah asking for this functionality and then fork/patch Chutzpah to add it (or wait for a developer on the project to hopefully get to this).
Update:
I pushed a fix for this issue. Once this is released you can use the following in a Chutzpah.json file:
{
"userAgent": "myUserAgent"
}

GWAN is modifying jquery.min.js to error

I am doing an experimental HTML template wich comes with jquery.min.js file - one of the most popular javascript libraries.
When I load the template from my local hard drive it works fine.
When I upload it and load it from server (GWAN) I get error (I think is not the only one) in Chrome looks like this:
Uncaught SyntaxError: Unexpected token { jquery.min.js:3
I inspected a bit and realized there is a
function $
which was turned into
function$
by GWan. The space removed is causing an error in Chrome, Firefox and Safari. I haven't tested other browsers but my IDE also reports a syntax error in the downloaded from GWAN version of the JS file.
I have also tried uploading the files to another server (Apache) and no problem there. The js file was not modified...
Any clues on how to get over this? I suppose there is a bug in javascript on-the-fly optimization of GWan?
Thanks.
It's a known issue and it will be fixed in next release (soon)
You'll be able to disable minifying directly from a init.c script in G-WAN v4.10+, this way:
u8 *www_mini = (u8*)get_env(argv, USE_MINIFYING);
if(www_mini)
{
*www_mini = 0;
puts("> disable minifying");
}
You just have to wait for few days for the new v5 release.

WScript is undefined

I am trying to run a Javascript file locally, which is supposed to create a CSS image sprite using ImageMagick. It's part of the OpenID selector JS component: http://code.google.com/p/openid-selector/
The generate-sprite.js (http://code.google.com/p/openid-selector/source/browse/trunk/generate-sprite.js?r=140) file is supposed to create the image sprite automatically. However, whenever I run it in IE (the local version of the file, of course), I get the error SCRIPT5009: 'WScript' is undefined on line 19, character 1.
I have of course installed ImageMagick and updated the location in the js file. IE9 is letting the ActiveX execute.
Since I'm not familiar with WScript, I am completely lost. Googling didn't help, since this seems to be a very generic error.
Can somebody help diagnose this error please?
When you say you're "running" the JavaScript file locally, are you using Windows? If so, and double-clicking or typing the filename from the command line doesn't work, try:
wscript generate-sprite.js
...which explicitly invokes wscript.exe.
If you're not using Windows, you can't use that script — it relies on both Windows and Microsoft's JScript (which the wscript.exe program invokes).

Categories