How to debug an AngularJS app using sublime text and Live Reload - javascript

I'm developing an AngularJS app, and would like to use Sublime Text in combination with Live Reload to do my debugging. I was using WebStorm before, where I could just select my index.html, and right-click -> debug.
How do I achieve the same functionality using ST with Live Reload?
First - what tool or process do I use on my Mac, to serve my index.html to my Chrome browser?
The goal is to be able to edit a given html or JS file in ST, and have Chrom auto reload when the edited file is saved.

WebStorm debugs both PHP and JS at the same time, if i'm not mistaken.
But since AngularJS is javascript, you could just use the google chrome developer tools or Firefox's firebug.

Related

chrome developer tool show only bundle.js instead normal components js files

Hello i'm using react and when i want to use debugger in my code adn see it via chrome it shows me only bundle.js in sources tab. How do i fix it. On my friends pc its looks normal on the same project. tried to check chrome options bun didnt fine anything usefull. at google i find only people with webpack but i didnt use it
Thanks to CherryDT. it happend becausesource maps disabled in your Devtools settings.

What is the process that I should follow to build an add-on from scratch?

I try to understand of how building an add-on for chrome and firefox web browser,
The idea is to display a notification or popup window on the page that the user open after fetch the title from JSON file or the user select the title of the website (I do not know what the better,advice me ! )and it's in JSON file
Building addons for firefox and chrome together is a little bit tricky.
In Chrome you can start writing your extension using only JavaScript.
For firefox, you have some choices to work with your plugin:
Using the jpm sdk for firefox addon developing. In this link you can find the get started plugin example, OR
Using firefox web extensions, which using no sdk and has similar API to chrome but it is new to firefox and they are not fully implemented.

Can I embed a chrome extension app as part of my main AngularJS app?

I have been doing a lot of reading and studying to figure out.
I basically just want my main AngularJS application to run, but also include an embedded Chrome Extension app - in this case, have regularly scheduled alarms (using the chrome.alarm API).
I want all users of my AngularJS app to have automatic access to the Chrome extension app, embedded in the main clientside one with lots of other Angular features.
It seems like I have to manually enable my Chrome app in Developer mode on my browser and even drag my Chrome app specifically to a location in my Chrome browser. I don't understand how end users can just automatically use my Chrome app then.
I need to add here I have never really used jQuery, only AngularJS but AngularJS extensively. My AngularJS app is the frontend, the backend is provided by Rails.
Some advice would be really helpful. I hope I am not downvoted as it is strange how sometimes questions get downvoted and I am not sure why...I don't really know where else to go with this question.
EDIT:
Ok some code to demonstrate:
myangularapp.controller('myappcontroller', function($scope, $http) {
var delayvar = 5;
chrome.alarms.create("arandomalarm", {delay: delayvar});
};
This doesn't just work as part of my AngularJS, I tried creating a manifest.json file in the app/assets folder too. As well as a background.js file there and my-chrome-app.js file. "chrome.alarms" is undefined, but I haven't enabled Developer mode yet. But still, how are end users supposed to use it if just to make me use it I need to do so much specific browser configuration?
You should have a look at Content Scripts and then at Message Passing which explains you how to communicate between a web page and an Chrome extension.
its not possible to automatically install a chrome extension. the user must install it from the chrome store.
you may make it easier for them to install it by providing an inline installation from your webpage. its in the official documentation and you can see an example on this page with the "add to chrome" button:
http://plusfortrello.com (one of my chrome extensions which has inline installation inside that page).
that example button is further customized to display a message instead if the user is not on chrome desktop.
if your extension also has permission to your webpage then you can also detect from your webpage if the extension is already install it (to hide the button, send messages to it and such).

Debugging JavaScript Angular application in WebStorm using Google Chrome

I'm trying to debug some controller code in an Angular application in WebStorm using Google Chrome.
My Debug Settings :
When running theses Debug settings :
1) Chorme flickers in the Taskbar as if it is trying to connect.
2) I don't see the Debugging Tab (Indication) usually shown at the top of the page (like a brownish header)
3) In WebStorm's Debugger window i get the following message
"cannot connect , ensure that Web Inspector is closed "
Additionally I was able to debug my code using Chrome development tools.
Any idea what is interfering the Webstorm's Debugger from connecting to Chrome ?
Have you installed "JetBrains IDE Support" extension for chrome?
if your web server is running in localhost:63342, try:
Setting the URL parameter to http:// localhost:63342
Bind your index.html file to http:// localhost:63342/index.html
If you have any question, please have a look to this post which describes how to debug Angular with Intellij, step by step:
http://ignaciosuay.com/how-to-debug-angularjs-with-intellij/
I encounter the same problem as you,but I have find the solution.You just lack a simple but important step,which is Overriding the default CORS settings.You can follow:
Right-click the JetBrains Chrome extension icon and choose Options
on the context menu. A web page with Chrome extension options opens
showing the parameters to connect to WebStorm.
Change the port which you can find in your WebStorm.Then,you can
debug your AngularJS app in the Chrome.
You also can see https://www.jetbrains.com/webstorm/help/using-jetbrains-chrome-extension.html
first check Jetbrains IDE Support install on your chrome then right click on icon go to option check port, I use routing in my angular application for this reason in URL of webstorm javascript debug not selected the specific html file just for example (http://localhost:63342/sampleproject/) write on urlbox then breakpoint in controllers worked . this solution worked for me

How do I check in Firefox and Chrome if a plugin is installed

I'm using an embedded plugin in my web app to enable scanning (Dynamsoft's webscanning plugin). I'm serving an xpi to firefox users and a crx to chrome users. When viewing the page without the plugin installed, Firefox will try to download the plugin and the user will need to click "manual install" to install it. Chrome will make no attempt to donwload the plugin (this is by design, according to http://code.google.com/p/chromium/issues/detail?id=15745)
I would like to use javascript to detect wether the plugin is installed or not (preferrably before trying to load it through the embed tag). If no plugin is installed, I want to provide an explanation and a link to the correct plugin to the user. Both browsers install their respective plugins without any problem if the user clicks at a download link instead of just trying to load through the embed tag.
So, does anybody know a way detect wether a plugin is installed using javascript?
Have you had a look at window.navigator.plugins?
..and the equivalent reference for webkit plugins-
The Apple reference for the WebKit DOM appears to have disappeared. navigator.plugins does work for me in Safari & Chrome. See a jsfiddle here: http://jsfiddle.net/2EaKD/
Sounds to me like a potential security hole, if a website (something remotely) could access your plug-ins (something locally). So I guess this is not possible.
Your addon can monitor which pages are opened by the user. If it is your page, you can make your addon set a global variable in that page and your page's JavaScript should be able to detect this.

Categories

Resources