I'm not sure if this is the right place to ask this. But how would one go about selecting text on this page (I'm trying to copy and paste to a dictionary online).
http://novel.naver.com/best/detail.nhn?novelId=189212&volumeNo=1
Thanks for any help.
You shuld find the node you need (paragraph with text) in the DOM tree and copy it. Use DOM inspector (ctrl+shift+K in Mozzila or `ctrl+shift+I in Chrome -> choose DOM inspector).
Using Chrome's web developer tools and Javascript turned off, simply right-click->Inspect element now in the Elements tab of the Inspector select the <head></head> tag and right-click->Delete Node, now the text will be highlight-able.
Related
I use a site at work that has unordered list "ul" with a lot of "li" elements without borders, I would like to always highlight the "li" elements to have better readability.
What I do at this moment is right click the page and open the inspector and add this line:
<style>li:hover {background-color: #ffff99;}</style>
It works but I'm wonder if I can do a plugin for this or if there is another way to do it automatically (I have already send a request to the developer of the site to request this change but while I wait I would like to know what would be the best approach to automate this task)
The list look like this:
File.txt 85215165
File2.txt 96312121
File3.txt 41212123
File4.txt 65623443
File5.txt 69532055
... and so on
(It's not a continuous string, the file name and the number are elements inside the one "li" element and I'm not able to select them at the same time with the mouse)
And it has no style so it's difficult (at least for me) to see which number in the right match the file name in the left.
Note: The list is generated with a script and when I try to see the code of the page (right click see source code) I don't see it, I just see the script, that's why I do it with the inspector
This may solve the issue:
Stylish or Stylebot -- Chrome plugins -- both seem to add your preferred CSS on top of the specific websites you choose.
Paste this in the browser console, slightly faster and easier than editing HTML tags from within the tree in the inspect element tab.
document.head.insertAdjacentHTML("beforeend", `<style>li:hover {background-color: #ffff99;}</style>`)
In firebug (or firefox/chrome developer tools) is there any config/plugin to show attributes of an inspected tag in a tabular layout ( just like computed css rules)?
Have a look at this: http://getfirebug.com/layout
Also, there is a similar GitHub issue for it, follow the thread for some solutions: https://github.com/firebug/firebug/issues/6410
Hope it helps.
The attributes of an inspected tag, as well as other DOM properties applicable for that selected node are already listed in the developer tools panel.
In Chrome, switch to Properties tab and collapse the first item - which is actually your inspected tag.
In Firebug, switch to DOM tab. A detailed list is available if you right-click on the DOM tab and select Show DOM properties.
However the chrome developer tools gives pretty much access to the tag management. You can use this to inspect the missing attributes of the inspected elements. Here's another one which allow you to compare the computed attributes.
You can do a little tweaking to make this work for you.
Select the element in the DOM Tree on the Elements panel.
Press Escape to open the Console.
In the Console, run $0.attributes. $0 is a reference to the currently-selected element.
I want to get inspect element of the page web . I've tried Jsoup to get html but it only returns the source code. So is there a way to get the code fully like the one in the Inspect elements? or is there a way to get code from Inspect Elements? Thanks !
First of all I recommend using Chrome. Then use Inspect Element to get the code. If you want to actually download all of the source code, you should just go to File -> Save Page As... to get all the code.
Save the code to your desktop and you'll have everything you need to open the site locally in your browser.
I have a website of which I want to copy an HTML code from - how do I copy all the text in inspect element - so I don't get the website's HTML code, but the code that I have already changed so that I don't have elements I don't want in my own webpage?
Do the following:
Select the top most element, you want to copy. (To copy all, select <html>)
Right click.
Select Edit as HTML
New sub-window opens up with the HTML text.
This is your chance. Press CTRL+A/CTRL+C and copy the entire text field to a different window.
it's the easiest way to do this.
Right click → copy → copy element
Select the <html> tag in Elements.
Do CTRL-C.
Check if there is only lefting <!DOCTYPE html> before the <html>.
Using HTTrack software you can download all the website content to your local directory.
HTTrack: http://www.httrack.com/
This is bit tricky
Now a days most of website new techniques to save websites from scraping
1st Technique
Ctrl+U this will show you Page Source
2nd Technique
This one is small hack if the website has ajax like functionality.
Just Hover the mouse key on inspect element untill whole screen becomes just right click then and copy element
That's it you are good to go.
I want to copy some html code from the web inspector but am only able to copy one line at a time. Is there any way to select a block of elements or all elements?
If you right click on any element in the Web Inspector, then click "Copy as HTML" on the resulting pop-up menu, you can then paste the html for that element (and all enclosed elements) into your editor. You can get the entire document by doing this with the <html> element.
On the console, try document.documentElement.outerHTML.
You could view the html response from the Network section of Chrome