I am creating a website and I used to make changes in the .js files in the Sources tab. These changes were directly reflected in the page. However, for some reason this does not work anymore. Note I am not willing to save these changes. It is just to do some quick tweaks and see the results directly. I tried it on another PC as well and also via Edge developer tools. Even older version of my website were it worked earlier.
Any suggestion, I am completely lost on what has caused this??
I couldn't find this in the linked questions above.
I have written a JS Web app that uses Google Maps. I'm getting reports from India that the browser location isn't being found on the mobile version of the app, and I need to be able to debug it (I live in New York).
It works fine in the NY installation, so I need to test on the Indian installation.
The problem is that I need my browser to report a local long/lat, so I can trigger that JS code path.
Is there a way to get my browser to spoof a long/lat?
This is the only thing I've found. It looks fiendishly complex, rather delicate, and I'm not sure it would work for my application.
Is there a more straightforward way for me to do something like supply a GPX file (like I do for Xcode) to spoof a location?
I am using a Mac, and can use pretty much any browser to do this.
Thanks!
OK. I figured out how to do this in Chrome.
It is almost the same as this (The solution I mentioned in the question).
However, Google seems to have moved things around. You no longer have the "Emulation" tab. What you have is a "Sensors" tab that appears in the second Developer panel:
In here, you can play with it.
I need to grab the current html inside a chrome packaged app. I am aware of Taking screenshot using javascript for chrome extensions but when I tried this, chrome states that the "tab" permission is not allowed for packaged apps.
Is there any way I can reliably grab the current page?
You cannot do what you are trying to do with a packaged Chrome application. Instead, you should probably look at making an extension, as that would be the way to go if you want to interact with the current page.
If you're unsure, here's a resource for figuring exactly what you should choose: https://developer.chrome.com/webstore/choosing
Not from a chrome extension, as those are browser-centric solutions (not webpage-centric).
Niklas Von Hurtzen has created a very useful js extension called html2canvas that essentially does what you're looking for, just not as a chrome extension. You can see it here.
Once "rendered," the plugin will create a canvas element by traversing the DOM tree of whatever you hand to the extension. From there it's pretty simple... yourRenderedCanvasElement.toDataUrl() will return a data: URL representation of that canvas element, which by default is a PNG, giving you a "screenshot."
Edit: Ha, I see now that you reference this exact thing in the message thread in the other answer...
Simple question, but I haven't been able to find an answer anywhere on SO or otherwise. In webkit's (Chrome/Safari) Developer Tools I can use the "Timeline" functionality to get an exactly look at precisely what is going on inside the browser while it loads a page (when it's evaluating script, when it's painting the screen, when it's downloading resources, etc.). I can also get the same information through Chrome's "Page Speed" extension.
Is there anything like this for Firefox?
I'm experiencing an issue where basically a script is not executing properly but there are no error messages in the console to give me any hit as to what is wrong. I want to try to get a more "in-depth" look at exactly what is happening and when so that I might find a clue as to what is going awry.
Thanks in advance!
Firebug has a timeline feature.
I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.
Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.
You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.
You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).
You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.
Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.
In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there
If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.
Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.
I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.
Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!