Skip Javascript Framework while Debugging in Chrome - google-chrome

I did research and found this website give my very useful information
https://divshot.com/blog/tips-and-tricks/ignoring-library-code-while-debugging-in-chrome/
I did enable blackbox mode for the file pattern as following
(firebug|angular|knockout|jquery|bootstrap|modernizr|respond)
However, if i click the pause button in developer tools
and when the mouse is over a page, the script still stop at jquery.min.js with the yellow box showing like the picture.
I just want to debug which function is performed when i did some action like, Click particular button etc.
But the jquery.min.js stop me from knowing this. Do you have any idea how to workaround or to make debugging more easier?
Thank you very much.

You need to enter in one library at a time if you are going to do them like that. Read the docs on blackboxing for more info https://developer.chrome.com/devtools/docs/blackboxing
You can:
enter the name of a file,
use regular expressions to target:
files that contain a specific name /backbone.js$,
certain types of files like .min.js$
or enter in an entire folder that contains scripts you want to blackbox such as bower_components.
To my knowledge you cannot enter a regex like (thing1|thing2|thing3|etc). That will not work.
Here's a screenshot of what you can do though.

Related

Save changes on a web page

I want to be able to save the selections I made on a page. If there's an app or extension that can easily do that, please let me know!
I clicked "Inspect Code" to open Chrome DevTools and tried copying all the code under "Elements" and pasting it in another browser. The page is incomplete, however. No graphics, no data, etc. What else do I need to copy and paste over?
I'm on a site/platform that I can only access with an internal login. Once I am there, I am able to make selections from dropdown menus.
Every time I have to pull a certain report, I have to select over 200 institutions from a dropdown menu. The next time I go to the site, I want to be able to see those institutions ticked off already.
Thank you.
Another way to get all of the code from a website is to do Ctrl + u, which brings you to the website's source code. You could use this to copy the code, but you would have to make seperate files and copy the code in them for scripts and links.
You can use wget (and a cookies.txt file with your logged-in cookie) to get the page, it's resources, and convert the links to load from your local copies:
wget --mirror --convert-links --adjust-extension --page-requisites --no-parent --load-cookies=cookies.txt http://example.org
Though I am very curious why you would need to do this...
You could create your own browser extension that checks the boxes for you when the page loads, or you can try to see if this browser extension succesfully captures the part of the page you need.
You could try using your browser's developer tools by right clicking some of the data and selecting "Inspect" or "Inspect element". This will most likely take you to a current snapshot of the HTML page you have open. This you should be able to copy paste to a more persistent format.

How programmatically save a website as if it has been rendered in a browser (the javascript executed)

In browsers you can 'save as' a page, and get the current html after the javascript has executed. Is there a way to do this programmatically? Call some other tool perhaps? Maybe remotely make the browser do something? It can be hacky - I just need it for home usage.
Depends if you want to 'save as' page or if you want to take scereenshot after javascript is executed. Its two different things.
In first case you can use simple wget -r <web address> wiki
In second case you will need to use some more sophisticated scraper lets say phantom js should be able to execute js and after take a screenshot:
http://phantomjs.org/screen-capture.html
Hope it helps!
Have a nice day

Use environment variable in link in email

I want to generate links that can be pasted in emails so I can show people folders in their directory structure such as where to edit their email signature manually.
I'm trying to put a link to the folder in an email but make it generic enough that when they forward it, everyone who opens it will get the link into their own directory structure properly so I need to use environment variables.
I type the text I want the link to say then highlight and CTRL-K then put %CSIDL_APPDATA%\Microsoft\Signatures\ in the link but Outlook changes my % symbols to %25's. I'd ask how to escape a % but it shouldn't be escaped I don't think since it's actually part of a link.
Environment variable list FYI:http://technet.microsoft.com/en-us/library/dd560744(v=ws.10).aspx
Simple answer, you can't. When you're linking like that, the current directory looks like root / to the html. So you could look at a subfolder of current directory (which you aren't guaranteed to know since it could be different on different OS's or even per user configuration) but that won't really help you.
This project will let you edit the actual HTML of your email by adding an Advanced tab but even with full control of the HTML, it can't be done. "It would open up a security hole the size of Denver."
Here's a lot of quality info on Relative Addressing which is what you're trying to do.
this is because outlook parse your input as HTML link.
I did not test it but you should give a try to this file://%CSIDL_APPDATA%/Microsoft/Signatures/
See this answer too : ways to make an html link open a folder

Is it possible to add information to the head tag of multiple HTML files, without going into each file manually?

Basically, I have a stylesheet I need to add to a LOT of HTML files. It would take so long to add it to each one manually that it wouldn't even be worth it. Is there any script or application I can use to help me with this, or any tricks in HTML I can take advantage of? Thanks.
Most IDE's have a function called 'find and replace'. I work with Netbeans, but I imagine almost every IDE can do this, perhaps even a decent text editor may be sufficient. Usually you can find it in the 'edit' menu somewhere.
You could search for </head> and replace it with <link href=.../></head> or something similar.
Ususally you can tell the replace function which folder it should search in, and even wich file types to check for. Should be easy and done in a couple of seconds.
Do these HTML pages share some resource? You can consider 2 options:
1 - Make a script to insert those stylesheets to the HTML files head automatically or;
2 - Insert the stylesheet once in an resource(Require the file for an script i.e) already shared by those files;
use php include(); and paste it on top of files. wont take you more than 5sec per page.
You can do this fairly easily using a good text editor like Sublime Text 2 or TextMate (Mac OS X). Here are instructions for how to do this in Sublime Text 2:
Open Sublime Text 2
Create A New Window (File » New Window)
Make sure the Side Bar is visible (View » Side Bar…)
Drag and drop the HTML files (you want to add the stylesheet to) onto the Side Bar
Find » Find in Files… (Note the mini find-replace dialog at the bottom of the window)
Search: </head>
Where: (Clear this field so it will look in: Open files and folders)
Replace: <link href=.../></head> (Hat tip to: #PeterVR)
Click Replace
Confirm dialog and be sure to save all your files!
Good luck!

Is it possible to save changes in Firebug locally?

What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.