I am using firebug to edit my magento theme. In a particular element I am getting an element.style attribute that I want to edit. Now how do I know which JS file is to be edited?
If you want to interact with elements via Javascript, you can use the console function in Firebug. Go to console, and click enable and from there you can start typing code as if it were javascript.
Example, if you wanted to check the z-index property of a specific element you could just type the javascript in the console:
document.getElementById("idOfElement").style.z-index
and when you hit enter it should tell you. You can also see errors in the javascript file if there are any.
If you are looking for the Javascript file of what is committing this change in the z-index property and you are 100% certain it is because of the Javascript, then you can use the debugger Firebug has which is also in the Scripts tab. If you're dealing with multiple javascript files, I'm not entirely sure how you can sift through which JS file is causing it, I believe you'll have to do that digging on your own. The debugger allows you step through your JS file though and see what changes are being made step-by-step.
Here is a tutorial on how to use the debugger if you're not familiar. Hope this helps.
Not sure about firebug,
But if you use linux you may try this command,
grep "element.style" -Rn .
Do you Want to change the Style or Something other.
If you want to change Style of a Particular Element, Just Follow the Steps
F12
Select Inspect Tool
Click on the Element where you want to change
In a FireBug Window look at Right and Make Sure style Tab is Selected
Just Single Click on value of a Particular Property
If you are not finding solution, Please Determine the Problem bit Clearly.
Related
I have created a code that gives me different standard answers i always use when i'm working. The code is simple but it will make me more efficient ...if is doable. The standard phrases have tag names and if i open the browser i'll get an "userBox", if i type in "moving" i'll get the phrase for that tag name. I've created a chrome extension that "matches": [""] but i want the tag names to be triggered and to give me the corresponding phrase automatically when i write an email. I have no experience with chrome extensions and i'm a beginner in js and html, is this doable for a beginner and if so i would really appreciate some help.
I am currently working on a similar project, the first task for you would be to get the contentEditable divs and textarea using querySelector, the divs and textarea inside iframe should be handled separately and listen for the changes made in the textarea. if you want to alter DOM or get something from DOM it should go in content scripts read more about it here in Chrome extension documentation and know the difference between content scripts and background scripts. Try starting with simple extensions like background-color changing extension to get the hang of it. JS for beginers might be confusing since its asynchronous, so I recommend doing some simple extensions first and get familarised with chrome extension API.
Is there any efficient way or plugin to include in order to hide javascript from being seen on the inspect element?
One word answer: no.
It is a badly created site if the site's security depends on "hiding" the source code. Try uglifying your code if you really don't want others seeing it, but it can always be reverse-engineered.
I'm trying to debug some styling issues on a site that has tons of .js files included. One of those scripts adds some css properties to an input element on click.
Is there an easy way to find which script and which part of it alters those css properties using Chrome Developer Tools?
Chrome Version 34.0.1847.116
In the Elements panel, right-click the element in question, and in the context menu choose Break on... > Attributes Modifications. Next time its style attribute is changed, the debugger will break on the corresponding JS line.
Use the developer tools to delete the element that changes on click. Then click the element that triggers the change. Since it can't be changed it will issue an error. The error will have a link on the right to show you exactly where it broke.
This should produce the exact file and function/script.
So say this is your element <div class="bob">Apple</div> and on click, Js adds style="color:red;" by deleting .bob you will break the script.
Note: Use developer tools to delete it. That way it doesn't permanently mess with your project.
Note2: Before deleting it, try just editing it and changing its id and/or class, like "xxbob", so it will no longer be recognized by the code.
Firebug is probably the best debugging tool that makes the life easy for developers. But one thing that I am not able to find out is how do you locate the function that changed the CSS values. In the Right Panel, when you click on any CSS rule, it will select the HTML node in the left and you get to know that these values belong to this HTML element.
Is there any way that lets you find which javascript function modified the CSS. This is shown in firebug as
element.style{
color:#898980;
top:78px;
bottom:121px;
}
I need to find which JS function changed the above values as it is not in my CSS.
The one highlighted in below Image
In the HTML panel, on the element whose style is changed : Right-click => break on attribute change.
This will break every time an attribute of this element is changed.
See also: http://www.softwareishard.com/blog/firebug/firebug-tip-break-on-html-mutation/
Florent
Is it possible to find out (in Chrome/FireFox) that which Javascript file (and hopefully line number) is being used on a web page by a specific element?
Thanks
The question is a bit unclear, but I can show you how to watch a particular element for JavaScript interaction in Chrome:
Then, after you do that, watch as we click the checkbox:
Some reference for Chrome: https://developers.google.com/chrome-developer-tools/docs/overview
Most other browser work in a similar fashion. There are also other ways to find out how JavaScript code is interacting with your page, but you'll need to give me a more specific scenario to answer that.