AngularJS - Edit Scope Function from Dev Tools - javascript

I am doing some testing on a product and I am attempting to edit one of my controller's scope functions (from Chrome Dev Tools) and then call this newly edited function either via the already-existing button that's set up to call it or via console. I'm having trouble with this though because my changes are not being picked up. I have been scouring SO for a couple hours but haven't been able to find a working answer yet. Is there a trick to refreshing a specific function (or possibly the controller itself) without reloading the page?

You should be able to change the code from the Sources panel.
Add your new code...
And then press Command+S (Mac) or Control+S (all other OSs) to save. When there's an asterisk next to the file name, it means that your new code hasn't been applied.

Related

How to get all form triggers (not just for the current script)?

I did the following:
Created a Google Form (e.g. form ID = ABC)
Created a Google Sheet (let's call it sheet1)
In sheet1's script editor, installed a trigger to my form with code such as the following:
var form = FormApp.openById("ABC");
ScriptApp.newTrigger("testFunctionSheet1").forForm(form).onFormSubmit().create();
When I call the following, I see my trigger was installed properly:
ScriptApp.getUserTriggers(form);
Everything is great. I can execute code whenever a Google Form is submitted.
Problem is, later on I go ahead and create a new Google Sheet (let's call it sheet2), which has similar code:
ScriptApp.newTrigger("testFunctionSheet2").forForm(form).onFormSubmit().create();
To be safe, though, I attempt to remove all the previous triggers from all my old scripts (i.e. sheet1). However, when I run:
ScriptApp.getUserTriggers(form);
... it returns one result (testFunctionSheet2) instead of returning both testFunctionSheet1 and testFunctionSheet2. Turns out it only returns triggers that are executed by the current script!
This is problematic because it may mean I accidentally have many scripts that are all executing upon a form's submission. If I never wrote down which scripts execute for which forms, I would have no idea what exactly is run from each submission. Some of those scripts may either do the same thing (which is a waste of CPU cycles at best, or will interfere with each other at worst), or they may do completely different things and potentially clash with each other.
I want a simple way to find all script triggers that will be executed on form submission. Something like if the function actually behaved as I would expect...
I.e. ScriptApp.getUserTriggers(form) should return something like:
sheet1: testFunctionSheet1
sheet2: testFunctionSheet2
This way I can easily tell which scripts will be executed upon form submission and can manually remove the old ones, to ensure nothing clashes.
Is there a way to find out which triggers will execute across all my scripts upon form submission?
Update: The documentation for getUserTriggers() clarifies that it will never return triggers for different scripts:
Gets all installable triggers owned by this user in the given form, for this script or add-on only. This method cannot be used to see the triggers attached to other scripts.
How, then, would I know all triggers associated with a given Google Form? Note: this doesn't necessarily have to be a programmatic solution. If there was a UI element in Forms that gave me this information, that would suffice too.
There doesn't seem to be a way to do this, but there are some workarounds that can make things a bit more organized:
Instead of installing the form trigger on a Sheet, install it on the Form. If you get into this habit, you can easily tell if there are scripts installed because the first place you'd check is in the Form's script. Simply run the get all triggers command as you tried above, and it'll work.
Instead of installing the form trigger on a Form, set the form to submit its responses to the Sheet, and use the onFormSubmit() method in SpreadsheetTriggerBuilder. To find out which trigger is associated with a form becomes as simple as opening the form, then going to its destination, and then looking if that script has a trigger for the form.
Hide the trigger script names in some property on the Form that you don't plan on showing to the user (e.g. customClosedFormMessage). Set it to something like This script has an active trigger associated with sheet1. You can create a helper function that before installing a trigger, it ensures that that text doesn't exist there (if you want to limit to 1 trigger per form, for example).
Go to https://script.google.com/home/triggers?trigger_type=3&document_id=ABC
That should give a list of all triggers from form with id ABC. You can clear filters there and add new filters.
As the OP already mentioned on the question, the documentation says that a script can't get triggers created by other scripts.
If you are the only one that create triggers from your script projects, then go to https://script.google.com > Triggers, there you will find a list of all the triggers created by your account.
I didn't tried it yet, but I think that one alternative is to enable the Google Apps Script API on the projects that create triggers and add a function to be called through Google Apps Script API to "log somewhere" the triggers created by that project.
Regarding to "log somewhere" maybe the easier setting is to email the log to the "active user".

On-click event in Add-in created with "yo office" gets invoked for all open documents

I created react-based word JS plugin with YO OFFICE.
What I noticed is that when I open two different word documents (word, online word, mix'n'match) with my plugin loaded then interactions with one instance propagate to another instance.
So, context actions supposed to be applied for one word document get applied to all open documents. This is not expected.
Any ideas what I'm doing wrong?
"Yo office" uses BrowserSync for debugging, which has the nice effect of automatically refreshing the page anytime you change your JavaScript, but also has this (strange) effect (though I believe it's "by design" from BrowserSync's perspective).
You can probably disable BrowserSync, though it may require a bit of re-wiring.
You can also rest assured that outside of the debug session (I.e., when deployed), this will not happen...

How to Webstorm search references acquired by jquery selectors?

when you use ctrl+g on a reference, it finds you that within the same file
is there a more global search (all files in project) that finds direct references as well as as those places where jquery is invoked to get a reference to the object?
You can check the event that is occurring on any button or any html element when clicked.
All you need to do is instead of searching it right in the webstorm you can trace it accurately in the firebug.
Please make sure that firebug is installed or open the default developer's tool in your firefox or chrome browser.
To see the event that is occurring on an element :
right on the element and inspect it.
firebug will open up at the bottom of the browser and in the right-bottom corner you will find a box in which there are different tabs.
click on the events tab
you will see events such as click,mousehover....etc.
check the function that is getting called by clicking on that function name and it will show you the line of code that is being executed when you click that particular element with the js file name and the line number.
Hope that helps you out.

Profiling: how to find out which object a method is attached to?

I have inherited a JavaScript application and I am trying to understand how it works using profiling in Chrome.
Chrome gives me the sequence of methods that are executed, but I only see the method name. How can I find out which object a given method is attached to?
If you want to see the call stack in Chrome dev tools for a specific method, you need to set a break point in the "Sources" panel.
Here's the entire process:
Run "Collect JavaScript CPU" Report
In the functions column, click the right-hand link (of the function in question) to jump to the appropriate source code line
Set a break point on that line
Re-run the script (usually via page refresh)
If break point is hit, call stack will be presented on the right-side column of the "Sources" panel

Is there a way to see what Javascript functions (the name of the functions) execute in real time in Chrome's Inspector?

For example, pretend there is Javascript code that will execute someFunction() when a button is clicked and I click that button. I wonder if there is some way to see that someFunction() was just executed. Is there a way to see what functions are executed in Chrome in real time?
If it is the Profiles tab in the inspector that does the trick, how exactly do you tell what functions fire in real time with that?
EDIT 1/21/2012 12:36p Pacific: From Brian Nickel's comment below, the Timeline tab in the Inspector is the way to see what happens in realtime, but how do you see the names of executed functions in the Timeline?
The Timeline and Scripts developer tool can be used to accomplish this goal.
Open the developer tools panel and press Record under Timeline to begin tracking activity.
Trigger the event you are interested in (i.e., in your example, click on the button), then stop recording (or continue to record, but be cogniscent of the amount of data you are collecting).
Note the entires logged in the Timeline panel. Find the relevant event, and click the twistie arrow to the left of the timing bar for that event. This will expose the function calls associated with that event.
Click on link to the right of the function calls to see the relevant JavaScript. (You ask for a function name, but keep in mind that the event may be associated with an anonymous function, so there isn't always a name available.)
If you want to step through the event handler itself, insert a breakpoint at the line after the handler's declaration (presuming the event handler declaration is greater than one line). Alternatively, expand the Event Listener Breakpoints in the Scripts panel and check off the appropriate event type (as listed in the Timeline panel for the relevant event). Note that this approach will break on every instance of that event, instead of the sole invocation you are interested in.
If you are running into trouble with minified JavaScript and inserting breakpoints (because each line is so long), here's a tip: open the minified script file in the Scripts panel via the dropdown, then click on {}. This will enable Pretty Print, expanding the minified code into something more readable by adding whitespace. This allows you to insert breakpoints more granularity. Note that if you now return to the Timeline panel, script references (e.g., jquery.min.js:3) now use the pretty-printed line numbers, not the minified, whitespaceless ones.
There are a lot of good utilities you can use: console.trace();, debugger, etc.

Categories