Edit external JavaScript file after breakpoint is hit - javascript

In the VS2010 IDE when a breakpoint (or an error) is hit, it opens a read-only [dynamic] version of the external JavaScript file I referenced. My workflow would be vastly improved if I could immediately edit this file, and refresh the browser. That is as opposed to digging up the original JS file opening it, finding the correct line and editing there.
I only know that this is possible because I was able to do this on my old work computer configuration, but for the life of me I can't duplicate it at home.
Has anyone made this work? Perhaps an extension? or maybe it has to with the way the files are referenced, or my basehref tag, or url rewriting.

This happens when the base href specifies a domain other than localhost. My issue was that to enable a local environment for Facebook JS, I need my domain in the url. So I set up my host file to remap localhost.mydomain.com to localhost.
When the Visual Studio IDE encounters a file reference which is something other than localhost, it does not attempt to grab the local file since it assumes (correctly in most cases) that it is being served from another site. In these cases it loads a file as [dynamic] and readonly.
Here is the test case:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://localhost.mydomain.com/virtual-directory/" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</html>
Any breakpoint within test.js will result in opening a readonly dynamic file.

how are you referencing your files? whenever a script block is written inside the html or is dynamically inserted the debugger will open the instance of the page where the code stops. If you reference the script using tags vs should open the original script file (at least that's what it does on my machine). could you upload an example of your current structure?

Related

Javascript not executing using XAMPP

In my html document (which is in the xampp/htdocs directory), I'm using an external .js file. The .js file is in the same directory as my html file. I'm simply trying to use document.write() function and it's not printing anything.
I don't understand what I'm doing wrong. Whats the issue?
HTML file
<!DOCTYPE html>
<html>
<head>
<?php include 'include/head_elements.html'?>
<script type="text/javascript" src="register.js"></script>
</head>
<body>
<h1>Company Account creation</h1>
<div id="registration_menu">
<!--Elements are added and removed dynamically using JS-->
</div>
<script>
hello();
load_element_group("email_verification");
</script>
</body>
</html>
JS file
function hello(){
document.write("Hello world")
}
Internet Explorer's security policy may block certain scripts from running on a local machine.
There are ways to avoid this -- such as by adding the XAMPP website as a trusted location -- but often this gets tricky since the default "Intranet Zone" is auto-configured on a PC and modifying that can have other consequences (different zones assume different settings, such as passing NTLM credentials to local websites).
See also https://stackoverflow.com/a/7038775/3196753
A quick fix often is to add the fully qualified domain name (FQDN) to the URL, but depending on the zone settings, this may still cause issues.
A final solution, and one many developers fall back on, is to actually use a registered DNS address, such as http://localtest.me/, which points back to localhost and should use the "Internet Zone".
As Chris G points out in the comments, this isn't typical. Normally localhost can be used without issue so I've provided an example Local Intranet setting which can cause this:

how to run excel application on html button through browser

i want to make a button in html page so that when a user click it an excel application get starts.
<button class="btn btn-primary" href="to popup excel sheet">click</button>
HTTP is a stateless protocol. What that means for you is that when your users download a file from the intranet via http, they are downloading a copy, rather than the original. Any changes they make will only appear in their copy, and then you end up with loads of copies of the same workbook with different, possibly overlapping changes. You don't want that!
And also ... how are your users even going to upload their changes?
You need to create a shared folder on your network and put the workbook there. You can then use the file:///SERVER/PATH/FILE.xls format in your <a /> links on your intranet to direct your user to the actual file on the server.
I would recommend you start by creating a simple html doc on your desktop to get familiar with the file:/// path format.
Eg
<html>
<head />
<body>
Click
<body>
<html>
save that in notepad and rename the extension from .txt to .html.
You can also type file:/// paths straight into windows explorer's address bar which allow for testing paths without resorting to the html document mentioned above.
UNFORTUNATELY! It seems that the browsers default behavior is to always download a link rather than open it (even if it is a local resource), so if you actually want to open it then you must resort to changing your browser intranet permissions to allow JS to access local resources, which then allows you to use the technique below.
This article (http://www.codeproject.com/Articles/113678/How-to-execute-a-Local-File-using-HTML-Application) uses
<script type="text/javascript" language="javascript">
function RunFile() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/system32/notepad.exe", 1, false);
}
</script>
to open notepad. You can use command line arguments with Excel.exe (https://support.office.com/en-za/article/Command-line-switches-for-Excel-321cf55a-ace4-40b3-9082-53bd4bc10725) to tell it what the file path is...
Excel.exe "C:\PATH\Excel.xls"
Refer link: Open excel file through normal html link

Run javascript file from the workspace in chrome developer tools

Is it possible to run a newly created JavaScript file in a local workspace in the chrome developer tools console?
The workflow I'm trying to achieve is the one shown in this image:
I want to be able to create a new file in my workspace, run (or require or whatever) the file and be able to use it's functions and variables in the chrome developer console.
If I'm correct, this means running the script within the context of the webpage and adding the methods and variables to the window object?
Is their a way this can be done?
I could not find an automatic way to add a local file into the DOM context. The best solution I found so far:
Open your local workspace and the right file
Press CTRL + a (Select all)
Press CTRL + SHIFT + e (alternative: Right click with the mouse on the selected text and click on "Evaluate in Console")
Well, this is not much better than copy&paste but spares a few key presses/mouse clicks.
You can create a plain html file like this with your javascript file in the script tag.
Then you should be able to get all your methods in the developer console.
You can define a method in your page to dynamically add javascript to the page and then call it from the console.
For example if you had a method like this:
function loadJs(filename) {
var tag=document.createElement('script');
tag.setAttribute("type","text/javascript");
tag.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(tag);
}
then you can use that method from the console to load your javascript files.
As an example:
Step 1: we create one folder "TestJS_folder" and it contains two files.
First file is index.html
Second file is test.js file.
Content of html file can be :
<html>
<head>
<title>Test JS in Chrome</title>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
Step 2: Now you can import/open this test.js file in VSCode or any editor. And you can code the js file from IDE and click on index.html , it will open the html file on browser and you can go to Inspect-> console to check the logs based on your use case.

jQuery file not being retrieved from server

For some reason my html file's request for my jquery.js file fails, however when I enter that exact url into a new tab in the browser, I get the exact jquery.js file I am trying to get when the website loads.
My code is as such:
<script src="js/jquery.js"></script>
and my website is here. If you append jquery.js to the root, you will see the exact file.
Can anyone explain why the file isn't properly retrieved when the website loads?
Any help is greatly appreciated.
At the beginning of your HTML file is this:
<!DOCTYPE html>
<html manifest="appcache.appcache">
The appcache.appcache refers to the file appcache.appcache whose content is:
CACHE MANIFEST
# V1.65 1-18-2013 10:15 PM
# cache
index.html
about.html
services.html
contact.html
css/signika.css
css/mq.css
css/index.css
css/about.css
css/services.css
css/contact.css
assets/signika_400.woff
assets/signika_600.woff
js/html5.js
js/index.js
js/mq.js
js/services.js
mail.php
images/chicken.png
images/salad.png
images/soup.png
images/steak.png
images/wontons.png
As you can see jQuery.js is not there. I suggest you to add js/jQuery.js into a new line and try again.
I figured this out by:
Running the Fiddler software side by side with Chrome (on Windows).
Loading your website in Chrome with Developer Tools (Ctrl+Shift+I on Windows, Command ⌘+Option ⌥+I on Mac), then go to the Network tab.
Then I see that Chrome loads appcache.appcache from the second time onwards and there's an error when loading jQuery.js.
The manifest attribute refers to the HTML5 cache manifest file.
Tutorial:
http://www.html5rocks.com/en/tutorials/appcache/beginner/
More references:
http://caniuse.com/#search=manifest (browser compatibility)
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5 (wiki)
https://www.google.com/search?q=html5+manifest
It's probable that the HTML file containing the script header in question is not in the "root" but perhaps in the same JS folder or somewhere else.
So technically this should work:
<script src="/js/jquery.js"></script>
Just keep in mind that this path is relative.

javascript object expexted

I am unable to call a javascript function as it says "Object Expected". I am using asp.net and this is being used on a standard aspx page with some usercontrols. One of the user controls called CookieControl calls a javascript method setandCheckCookie() on document.ready.i.e
$(document).ready(function() {
setandCheckCookie();
)};
In the head section on my aspx page I have reference the javascript file before I add the control:
<script src="CookiesControl/js/Cookie.js" type="text/javascript"></script>
<uc2:Cookie ID="Cookie1" runat="server" />
I've event tried adding the script reference on the user control itself but when I go to my aspx page I get the object expected error.
I don't believe its the control or the js file as both these are used elsewhere in the website and they work fine but something I'm doing is stopping the js file from being reference because in firebug and IE debugger I can't see the referenced js file.
Perhaps the path is incorrect but I have dragged the script from the solution explorer and visual studio isn't complaining about the path either.
So my question is: what could potentially stop my javascript file from being referenced.
Visual Studio complaining or not about a path is not always saying what you'll get in the browser. To check if the script is referenced ok, try to get the script file in the browser. For example, if you page is at http://yoursite/yourpage.aspx and your script reference in the html code (by View Source, not what you see in Visual Studio) is folder/scriptFile.js, put this address http://yoursite/folder/scriptFile.js and see if you get the file. If not, then it is not referenced ok.
To solve issues like that, put the full path after yoursite, like:
<script src="/ScriptVirtualFolder/CookiesControl/js/Cookie.js" type="text/javascript"></script>
where ScriptVirtualFolder is in your site root folder, and it is a virtual folder, means it is accessible by the browser in this path.
Also, you can use asp.net to resolve your path by using the ~ sign and runat='server'. For example:
<script src="~/ScriptServerFolder/CookiesControl/js/Cookie.js" type="text/javascript" runat="server"></script>

Categories

Resources