where can i keep settings for my tfs extension - javascript

I'm trying to write a plugin for TFS 2015 (its important). I read a couple of manuals. the examples all turns out simply, but it is more difficult with a real plugin. my problem: where can i keep settings for my tfs extension?
I want to move requests addresses from the code in the some type settings(they will be the same for all users), so that during work, I could quickly change them without changing the plug-in code. but i cant find any solution of this problem.
i find this info: https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/data-storage but it still keep settings in code.
I will be grateful for any information.

Not sure if I totally got your point. You just need to change your own code with the settings of your extension and publish to TFS. Then all user on the client side using your extension will automatically update the setting. Then don't need to manually change the code or update.
Update
Unfortunately, this is not support for now. You have to through the code to change the settings and rebuild, package the extension. Update/ install and test your extension.

Related

How to save changes to modifications of external site JS Code

I have recently been trying to mess around with JS code of different websites to explore the programming language further. I have been able to successfully modify the scripts of the websites but I cannot find a way to save the changes and they do not take effect. I am using the newer Microsoft Edge (Version 92.0.878.0 (Official build) dev (64-bit)).
It shows that "changes to this file were not saved to the system", how do I go about this?
(please note: this website is external and I have tried downloading the HTML and modifying it but then the site does not function)
This is the default behavior if you don't add the files to workspace. If you want to save the changes to file system, you need to use Filesystem-> Workspace.
You can refer to Edit files with Workspaces about the detailed steps of using Workspace. After Step 1: Set up, you can directly go to Step 4: Save a JavaScript change to disk.
Besides, there's another workaround to test the changed js code without saving to file system. You can refer to this answer about how to achieve this.
Windows file system is preventing chrome from saving file with special chars. Chrome is using filenames to match files on your local version with ones on the webpage.
Because of windows replacing special chars ("?") With escaped ones ("%3"), chrome is unable to match them and shows that error.
I don't know the perfect solution for that, but one of the workarounds would be to remove cache canceling string with question mark. Very nasty bug of local overrides.

Errors in Firefox Add-on SDK when using cfx xpi whereas cfx run works great

I'm a student at a University Institute of Technology in France and I'm very new to Firefox add-on development since I discovered it at the beginning of my work placement, a few days ago.
What I have to do is an add-on that allows employees of the company to organize SCRUM-meetings (it deals with agile software development).
For the moment, what I've done looks like this :
http://img11.hostingpics.net/pics/716589MeetingConfigurationPanel.png
The panel allows users to configure the settings of the meeting. I have also added a toolbar with action buttons and a frame in it, so that the meeting can start/be interrupted on the action buttons Onclick event. I have implemented countdown timers for each participants. There is also a "Next Speaker Button" that resets one of the timers when clicked...
And all seems to work fine when I use cfx run, but when I package the extension using cfx xpi... there are errors.
See : http://img11.hostingpics.net/thumbs/mini_585083outputExpected.png
EDIT : Problem with the link. I will update it as soon as possible.
Here is what I have in cfx run mode. All the buttons I declared in the code, along with the frame, are correctly displayed in the toolbar.
But in cfx xpi mode, some of the buttons are apparently "stuck" in what Browser Console refers to as "inner-toolbar" or something like that as I can read when I remove the extension.
That made me wonder if the buttons really were in the toolbar. And they were, according to the Debugger. So I've started thinking that my problem was compatibility with Firefox but I've checked both Firefox version and the em:maxVersion attribute in the install.rdf file that can be found when unpacking the xpi/zip file, and I've change the values so that they match, but it didn't resolve my problem.
I've read as many things as possible on topics related to the problem I'm now facing (including StackOverflow questions) but I have not been able to find a proper way to fix it up to now. Is my problem really different ? I have no idea. I might have done something bad trying to change things as they were intended to, I suppose. But it's unlikely.
And the thing is that I really need to make this add-on works, because it is the only thing I will work on during my work placement.
The solution to my problem may be very simple. Maybe I did something really stupid. I don't know. The only thing I know for sure is that I want to find what's going on, so that I will be able to deliver the first version as soon as possible.
Feel free to ask for more informations if necessary.
Thanks for reading.
Julien B.
(Not technically an answer but SO won't let me comment.) You could try cfx run, then uninstalling the addon from the FF session it opened, then installing the xpi in that same session by doing a file open of the xpi (which will install it). Have a feeling it will run in that case, which means there is a difference between your standard Firefox and the one cfx run opens. There is a difference of course, because cfx run doesn't install all your other add-ons. But it may be running a different Firefox version as well. I mention this because when I run cfx run it always opens the beta version of FF which I downloaded at some point, and I don't know where its picking it up from.

Javascript debugging with Symfony2 in PhpStorm

I'm developing a Symfony2 application using PHPStorm IDE.
I can't seem to make it work. I've tried Javascript Debug for both local and remote with multiple parameters. Messages varies from "Remote URL isn't specified for so breakpoint..." etc.
Best case scenario is that I would be able to debug my Javascript codes inside PHPStorm. Is this possible?
I'm also using AsseticBundle for my assets.
I use PHPStorm too but I only use it for coding, debuging is in browser..
So I would say it depends on if PHPStorm executes the app_dev.php and graps the output.
If you already have experience with PHPStorm (Debuging) you could answer this. I myself don't think so...
Hope I could help at least a little :)
JavaScript debugging is definitely possible from the PhpStorm if you are using Chrome or Firefox browser. Debugging JavaScript and PHP at the same time is not supported at the moment.
I was able to set this up
Install the JetBrains Chrome extension
In PHPStorm click the Run/Debug Configurations just to the left of the green bug near the top right
Add a Javascript Debug (using the plus sign)
In the URL box, just enter the URL of the page you're debugging (e.g. http://my.test/app_dev.php/route/here/not-there/3290), name the config, and apply
Add breakpoints in the js
Make sure dev tools is closed in the browser, then click the green bug (ensuring that the config named in 4 is chosen) and it will redirect to the page specified in 4.
The breakpoints will now be activated and are able to be stepped through (like xdebug). When it stops on a breakpoint it may be in a version of the original file with the file's name appended with a version number (this file is read-only). There is a button to the left hand side of the name where you can reload the read-only file being stopped at, after you have updated the actual (writable) file.

How can I debug a minified JS in firebug?

I have a web page which includes insane amount of minified JS files. The web page works perfectly fine on my local network but throws some JS error on staging. There is an issue in JS and I wan't to debug it. When I load the JS in Firebug's script tag it appears in one long horizontal line. Is there a way out in Firebug that expands or beautifies the script for debugging? I know I can use jsbeautifier but they wont help me. I can not upload an expanded file to CDN, defeats the purpose of using CDN.
Points to be noted,
a) I can not control the box which serves JS, its on CDN, I mentioned it.
b) I can use beautifiers etc but would that help me in debugging the script in run time? IMHO, no
c) Being bound by NDA and other legal things I can not share the script but its a generic problem, you can encounter it with a minified jQuery
Beautify your script
Add the CDN host in /etc/hosts or your local DNS to resolve it to your own web server
Host the beautified version and everything that you need on said web server
Both Firefox and Chrome (versions as of this edit) support beautifying script with the {} button available in the inspector.
Just load the minified file and press the {} button at the bottom and it instantly beautifies, making breakpoints and other debugging possible. (True for Chrome too)
This is a common problem and the Chrome dev team have recently come up with an elegant solution, which they've called Source Maps - see http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more info, I think you'll find it's exactly what you (and the rest of us) have been crying out for! :)
This is more a workaround, but it can help. The idea is that we will replace files coming from the server by files on your machine.
This will work with any browser.
It takes a bit of setup the first time (15 minutes maybe), but then it can be very convenient.
It can also helps testing your bug-fixes in a live/prod environment.
Get Fiddler (it's a web debugging proxy), install it, run it.
http://www.fiddler2.com/fiddler2/
(Restart browser after install to get the Fiddler extension)
If you debug an HTTPS website, check this first:
http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
From now on, you should see in Fiddler ("Web Sessions" pane on the left) all downloads made by your browser, including JS files.
If not, check this : Fiddler not displaying sessions
Find the file you want to debug in the list (Ctrl+F works)
Click on the file. Then either:
get the file content from the inspectors pane (textView tab), beautify it, save to a file on your local computer
or have access to a file which contains the source code (ex: from your source control)
Go to AutoResponder tab (top left pane).
Select "Enable automatic responses" checkbox.
Select "Unmatched requests passthrough" checkbox.
Drag your file from left pane to right pane (prefills rule editor at the bottom)
Set the other field with the path of your local file
Click the Save button
Reload the page and enjoy your debugging session.
Fiddler can do many more things, but this use-case answers the initial question.
Consider a Change!
Firefox w/ Firebug was my favorite JavaScript debugging method for almost a year, but I've recently moved to Google-Chrome's Developer-Tools which is far more superior.
Chrome supports an On-The-Fly (built-in feature) beautification of JavaScript resources
Once beautified, you are free to debug the JavaScript resource file, as it was "natively" downloaded beautified from the web-server. Breaking-points are set by clicking the line number.
One of the most extremely powerful feature,
Is once You've Stopped In A Breaking-point, You Are Free To Execute Commands (using console) In The Same Scope You ARE In The Breaking-point. In Firefox you can't do that.
Its so easy to debug (even anonymous functions), You'll never be back to Firefox.
Try It!
Pretty-print your JavaScript. Google this and you'll find multiple on-line JS beautifiers.
I happen to use http://jsbeautifier.org/ myself and it works fine, but search for others and use one that suits your needs.
Caveat: You still won't be able to get meaningful local variable names (which are usually renamed by a minifier). If the code was compiled by the Closure Compiler, then you absoutely won't get any useful information back at all, even when beutified, because then all variables and functions and properties are mangled (not only local ones).
Now, if your problem is with debugging code that comes from outside (e.g. a CDN), obviously that code would be minified, and you can't save your beautified version back there. In this case, you can replace the tags that load code from a CDN with a url pointing to your local version, then you can beautify the code (downloaded from the CDN) into your own server and you can then debug with FireBug.
Now, if you don't even control the HTML that contains those tags (e.g. they reside on a outside server), then unfortunately there is no way for you to do what you want without physically downloading the entire site to your own server. Even if you downloaded the entire site (with all the files), it may not work since the site may be driven by a back-end processing language or accesses a back-end database. In such case you'll also need to simulate all those data. It can be done, however -- you just have to go through a lot of pain. My recommendation is to save a version of the web page and run it on your own server, serving beautified code from your own server to debug.
Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then it's probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un-minify your JavaScript.
In Chrome and Safari, simply select the 'Scripts' tab, find the relevant file and then press the "{ }" (pretty print) icon located in the bottom panel.
In Internet Explorer, click the tool icon by the script selection drop down to find the option to format the JavaScript.
Opera will automatically prettify minified JavaScript. Source

Best ways to develop painlessly in Javascript on a local machine

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!

Categories

Resources