Using Google Chrome to debug and edit javascript embedded in HTML page - javascript

Chrome developer tools allows you to edit javascript in the browser if the javascript is in a .js file. However, it does not seem to allow me to edit javascript that is embedded in an HTML page. ie:
<script type="text/javascript>
// code here that I want to debug/edit
</script>
This is a big problem for me as I have quite a bit of embedded javascript in a certain page.
Similar to this question: Edit JavaScript blocks of web page... live but this is about firefox, not chrome.
How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?

Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script> tags. Also you can add debugger; command to script what you want to debug. For example:
<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>
Don't forget to remove debugger;'s when you want to release your website.

I had a difficult time locating the file that had my inline/embedded javascript. For others having the same problem, this may or may not be helpful...
Using Chrome 21.0.1180.89 m for Windows
All files are shown after clicking that very discreetly placed button. See:
Now you may begin debugging...

None of these answers have worked for me.
What works for me is if I have my javascript on the page already loaded, I can copy that javascript, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works.

Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".
If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.

Solution described here: https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript
Add the 'sourceURL' directive in your inline/embedded script like this:
<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>
Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source

Related

On the Wix Velo platform, is code placed in the "Page" area publicly visible?

According to this article, code that is put in the Page area specifically is publicly accessible. They even include this image to demonstrate:
I have not been able to see code that is entered here on the published version of the site. Here is an example where I published a blank page with a code in the onReady function:
https://steven0790.wixsite.com/my-site/blank
When I go to this page and inspect and search, I can't find the code. I would expect it to be in a <script> tag.
I have also tried looking through links in the code in case this is saved in a .js file or something like that.
Can anyone confirm whether or not this code really is accessible?
Check the Console instead of the Elements tab in the browser developer tools. It will let you know which JS file contains your code.
Look for a message that looks something like this:
Running the code for the HOME page. To debug this code in your browser's dev tools, open cnric.js.
You can then open that file in your browser developer tools and see the code.

Editing Javascript using Chrome Developer Tools

I am trying to edit javascript on a site using Chrome's Developer Tools. I have read about 30 accounts of how to do this as well as watched a few videos. The fact is, when I go to the sources tab and open the file I want to edit, I can't do anything to it. Is there some step I am missing?
I can create break points, step through, etc... I just can't edit. Was this functionality removed recently?
I know this question is stale, but I just had a similar problem and found the solution.
If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.
You can edit javascript in the developer tools on the "Sources" tab, BUT it will only allow you to edit javascript in its own file. Script embedded in an HTML (or PHP) file will remain read-only.
It has some limitations:
has to be a JS file. can't be embeded tags in a html page.
it cannot be prettified.
I don't know if you need this to save permanently, but if you need to just temporarily modify the js:
I can copy that javascript I want to modify into a text editor, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works. Will last until you reload the page.
I did search "chrome dev tool edit javascript". This page is the first search result. But it is too outdated, it does not help me.
I am using Chrome 73, this version of Chrome has "Enable Local Overrides" option. Using the function, I could edit a javascript and could run and debug.
My solution:
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!

Multiple Javascript files creating alert boxes

I have been given a project - the one HTML page includes about 45 different javascript files. I am getting alert boxes when I click on some of the elements - which javascript file is making the alert? How do I determine this, preferably which line in the javascript file but I can start with which file...
If this can be done within the web browser (I dont care which web browser) please let me know how... I have looked at the resources tab in chrome but it did not help me.
Thank you.
Use a text editor to replace all
alert
by
console.log
And then use Chrome inspector to see where the logs are.
Include your own javascript file on top of the page and predefine alert with:
alert = function(msg) {
alert(msg); // put breakpoint here
}
Then use the debugger (Firebug in Firefox, or Developer Tools in Chrome) to put breakpoint as described above. The stack trace view in the debugger will show you which script line / file is creating the alert
Use the profiler in Firebug
Console -> Profile -> Click to enable. It will show which all functions are calling, search that function names, and add break points to debug.

Does Chrome stop certain javascript code from running because of its extensions?

I have a small code in my page with
<script type="text/javascript">
function doPost() {
document.forms["form"].submit();
}
function Func1Delay()
{
setTimeout("doPost()", 0);
}
....
<body onload="Func1Delay()">
I have this error in the console saying
Uncaught TypeError: Cannot call method 'create' of undefined
and on the right, it's due to the chrome extension MeasureIt. When I disable it, my script works. Is there a workaround for this problem?
The short answer is YES.
But the complete answer is NO, it's not Chrome, but some extension who interfere with your code.
For example:
1) A content script can add a listener and use stopPropagation. In this case your code won't receive that event. I can image a more specific scenario where the content script fails and therefore prevents other listeners to execute.
2) A content script can mess with your page's elements. It can remove some, and add its owm. What would happen if the extension add a SCRIPT element with a var or function named exactly the same that one of yours?
We cannot be sure about how "well" the extension's code is written.
By the way, there is a lot of Chrome's extensions that interfere with pages. Some months ago Skype extension for Chrome was found guilty of interfere and destabilize web pages and video playback in that browser.

Why does the Chrome Developer Tools/Console does not show javascript files/error that were loaded dynamically?

I'm loading files using a require function inside my code, which adds a <script/> tag to the body of the page with the relevant attributes.
The scripts are loading just fine and they are accessible, but if I have an error in one of them, it never shows in the console, and I don't have them showing in the Scripts tab inside the developer tools, essentially robbing me of the debugging capabilities.
What am I doing wrong?
My require function looks like so:
require: function (moduleId) {
var filename = this.config.modulesDir + '/' + moduleId + '/module.js';
var script = $('<script></script>').attr({
'src': filename,
'type': 'text/javascript'
}).appendTo('#Scripts');
}
This works just fine with latest version of Chrome (15.0.874.121). I did setup a jsfiddle example and you can clearly see it works :
http://jsfiddle.net/Tgax4/
There are two possible solutions to your problem :
Chrome is not up to date on your workstation. Update it.
You require scripts that does not exists, and that's why they are not listed. Ensure you have the correct location.
In the second case, chrome should tell you in the console that the script does not exists, so I'm pretty sure it has something to do with older chrome version.
Have you considered using a library like require.js (http://requirejs.org/) to handle your dependencies?
Using it I never had problems debugging in dynamically loaded scripts.
EDIT: nevermind, that was just JSFiddle, wanting the slash to be escaped. Having it escaped made it work for me. So I don't think the error is in your function. Maybe you provide us with some more information.
Could you try replacing
$('<script></script>')
with
$('<script>')
Make sure that you are displaying scripts from frame you are in inside devtools. If you load scripts inside iframe then you should select this frame in chrome inspector as current environment to show scripts from this frame. At the left bottom corner of chrome devtools right next to buttons is small select which gives you possibility to change current frame (default is ). Try to select other frame and check if then scripts will show in script selector on Scripts tab.
And also if you can not see errors, check if next to mentioned select at the bottom you have selected proper level of logging - try to select button 'All', and check if then you will see any errors.

Categories

Resources