Web Dev. tool to display embedded URLs?

[Charles Wiggins]

My institution is working on some important documentation and I am having a problem with matching up links.

If you look at the attached image below, that I pieced together from two screenshots, you'll see the "College Catalog" link in the text and a corresponding "College Catalog. 2014-2015." link in the Sources area below. If you look carefully at the two URLs in the Tooltips you will notice that they aren't the same, but they are supposed to be, and I need to fix that. We have about 20 of these pages and some of them have dozens of documents attached to them and it can get confusing, quickly. I am trying to figure out a way to speed up this process.

(BTW: The Link Revealer add-on that I am using in the screenshots only works when you are pointing at the link.)

I've found plenty of tools to extract links into a separate document, but then I'd still have to find each one on the original page. Do any of you know of a tool that will display all URLs on a page in context, like on the page next to the link text? Kinda like the screenshot I pieced together?

Or do you know of a tool that works like "Find" but it will search the source code for links and highlight them or something? (Yes, I know I can pull up the source code and search it, but the software uses a text editor and I would STILL have to locate the links on the page as viewed.)

Problem.png

Like I said, I am looking for any way of speeding this process up.

TIA
Charles

[Jason Beam]

View the source?

(Right click, view source) -- or do you not want to get down into the nuts and bolts of the HTML?

[Charles Wiggins]

View the source?

(Right click, view source) -- or do you not want to get down into the nuts and bolts of the HTML?

As I stated, I know how to view and search the source code, the problem is that the work is done through an editor and the code is not very clean so that is actually a more cumbersome process than scanning the page manually. I didn't build the thing, I've just gotta edit the content.

[Dan Hintz]

View the source?

(Right click, view source) -- or do you not want to get down into the nuts and bolts of the HTML?

This seems like the most valid way to do it... search on http:// or some such text and jump right to the next one in line.

[Alan Rutherford]

You could take your favorite text editor and globally change all the <a href to something like ~ href. Change the </a> to say ~`~ or something else that won't be in the document.

That will make the actual links visible between "href=" and ">".

Make sure you do it on expendable copies of your files.

You can go farther and put a CrLf before the first ~ (or instead of it) so each one begins a new line. Replace "href=" with a tab and </a> with another tab and then you can import into a spreadsheet. If you want.

I'm sure there are better ways but this one is free and works right now.

[Edit: Putting each one on a new line is only useful while you're in the text editor or if you're going to strip away everything else and import into a spreadsheet to make a list. I'd be doing that but if you're not, ignore that part.

This kind of thing is almost fun if your text editor lets you create and store macros. Once you have the steps ironed out, you could turn a whole folder of .html files into nothing but tab-separated links with a few keystrokes. I like UltraEdit, which is not free, but there are others.]