asking again the question Using Google Chrome to debug and edit javascript embedded in HTML page
if there is a Javascript embedded in html page can i edit it .in this question he accepted an answer.In this answer's second comment by antyrat "Well you're right, but you can edit this at Elements tab instead." but when i edit javascript in script tag changes doesn't affect code flow.Please guideline is it possible to change embedded js in html page in chrome dev tools or not ??
You can make changes to the javascript in a page using chrome developer tools but those changes do not get saved. You will need to manually go and change it in the respective .js file for the changes to take effect. Only if you want to preview the change temporarily, you can try those with the chrome developer tools
Related
I like the integration of the Dragonfly IDE in the Opera Browser. Especially, the link between the visual and the code perspective allow easy editing of the corresponding HTML code. However, I have not found a way to save my changes to the local file.
I have a simple static website that is stored on my local harddisk.
I open the file in Opera Developer (Version 28.0)
I use the 'inspect element ctrl+shift+i' menu option to open dragonfly
I make the changes and check them in the browser
I save the html file from dragonfly
Observation: changes are not saved.
Is there way to save the interactive changes permanently?
It's not really possible, It's just a developer tool.
You can change it on Dragonfly but it won't modify the file.
2 solutions :
you change manually the HTML file with an editor like Notepad after each change on dragonfly
You use some software like Dreamweaver that allow you to see what you're editing in real time and save these changes.
I am going to display plugin for firefox and google chrome. i know that all this plugins are developed using javascript and CSS but i donnot know how to display sidebar panel for example facebook chat panel.
thanks in advance.
For information on how to write a Chrome extension, see the Chrome Extension docs.
https://developer.chrome.com/extensions/index.html
For information on how to write a Firefox extension, see the Firefox Extension docs.
https://developer.mozilla.org/en-US/docs/Extensions
In Chrome, for example, you'll need to insert a content script on the page you wish to display other information beyond what's already displayed. For more detail, see here:
http://developer.chrome.com/extensions/content_scripts.html
I used tumblr's javascript embed code to embed my posts into an external website. Now I want to style the posts. Where can I find the full list of tags, classes, and all of that in order to do this? I see people posting some of the tags, for exampe ol.tumblr_posts, but no one has said how or where they actually found out that's the tag tumblr is using for that particular element.
Someone mentioned using the web developer extension in Firefox to pull out the HTML associated with the javascript file but I can't use Firefox so I need another suggestion? I did go to tumblr's docs but the tags and everything used for customizing themes WITHIN tumblr seem to be different from the ones used to display posts outside of tumblr.
I also looked around in the api section and didn't see anything that lists all of the tags. Thanks!
UPDATE: Here's a post that discusses what I'm talking about but none of the people giving answers that show what tags to use to format the script's output say how or where they got the tags.
tumblr javascript embed with css skin
This website is the one that said to use the FF add on but again, the person who figures out how to find the tags using it doesn't say HOW, they just say it worked. I'm finally in a place where I can use Firefox so I installed this web developer thing and I still don't see where I would go to see the info that shows the actual html with all the styles instead of just showing the link to the js code.
http://forums.macrumors.com/showthread.php?t=745299
Chrome and Opera's developer console is CTRL + SHIFT + I... try looking in the source there
IE's dev tools is f12 if you can't use Chrome
Also: I'm not sure if this is what you're talking about but I'll throw in this link for good measure:
http://www.tumblr.com/docs/en/custom_themes
I figured it out! Unfortunately, the only way I could do this was to use the Firefox Web Developer Toolbar Add-On. Once you have that installed, you go to the webpage where you've embedded your blog's javascript code.
Then, in the Firefox toolbar, there should be a tab that says "Miscellaneous". Click on that, then click on "Edit HTML". A new pane opens up towards the bottom of the browser. Inside, it will show the source of the webpage INCLUDING the information that the javascript code generates, which shows the classes, html, and all of that.
It's still not a ton that you can customize compared to using the api (which I don't know how to do) but it's a start. Thanks everyone!
I am working on building a Chrome extension that injects bits and pieces of JavaScript onto websites, a bit like AdBlock does.
What is the best way to develop/test my JavaScript code on third-party websites? I want to have my custom JavaScript loaded as if it was JavaScript from the original website.
You can use Chrome's developer console. Right click, go to inspect element, and go to console. Alternatively, press ctrl+shift+j.
You should write the code in notepad++ or a similar text editor and then copy it into the console and run it to test it.
How to get effective HTML after executing all scripts?
Actually scripts are adding and modifying control and css in the page. I would like to see html of resultant display as a static page. Is there any way to get this?
Edit: Suppose if background image is added using javascript, How can i see in Html OR css?
Please try to get this before giving answer.
One way would be to use Firefox with the Firebug extension.
Firebug is an extension for web developers. Among other things, it offers an "HTML panel":
The HTML panel displays the generated
HTML/XML of the currently opened page.
It differs from the normal source code
view, because it also displays all
manipulations on the DOM tree.
[...]
A similar solution for MS Internet Explorer would be the Internet Explorer Developer Toolbar.
Note that both solution are browser-specific. There is no way to get the resultant HTML independent of the browser used, because this HTML only exists in the working memory of the browser (so you cannot, say, sniff it on the network).
Use the firebug plugin for firefox, with it you can 'view generated source'.
This is a javascript approach. Unfortunately, it doesn't work perfect. For example, it doesn't include the contents of textarea's.
document.documentElement.innerHTML
Another way is selecting everyting (Ctrl + A) and choose 'View selection source' from a context menu.
The Web Developer Toolbar addon for Firefox has a 'View Generated Source' button that let's you do that. It's under the 'View Source' Menu of the toolbar.
It presents manipulated document as a static source, like what the "View Source" option does, but with modification by the Javascript.