5 Cool Inspect Element Tips
5 Cool Inspect Element Tips
Inspect element is an easy tool, to interact with the source code of any website. And in this video, we’ll see 5 cool Inspect Element Hacks.
[Video Content]
Download anything with Inspect element
Reveal Hidden Passwords In Web Browsers
View ‘locked’ content on websites
How to Temporarily Edit Any Webpage
Update Websites with Inspect Element Console
[ Code for console]
To make any web page editable —
document.body.contentEditable = true
To make bulk find and replace on any website
document.getElementById(‘divID’).innerHTML =
document.getElementById(‘divID’).innerHTML.replace(/before/g, “after”);
[Resource]
I use Audio from YouTube audio library.
Cold Funk - Funkorama by Kevin MacLeod is licensed under a Creative Commons Attribution licence (https://creativecommons.org/licenses/…)
Source: http://incompetech.com/music/royalty-…
Artist: http://incompetech.com/
[Contact Me]
You can reach me here
Website: http://receivetipstricks.com/
Facebook: https://www.facebook.com/ReceiveTips/
Instagram: https://www.instagram.com/dxmrinal/
Twitter: https://twitter.com/ReceiveTips
Google plus: https://plus.google.com/u/0/111437874…
Content
0.079 -> hi there this is pnau once again and
2.61 -> today we are going to see how to inspect
4.529 -> a browser with inspect element option
6.359 -> but first what exactly is inspect
8.79 -> element and then consider any webpage on
11.79 -> the surface all we see is a bunch of
13.889 -> text with images and videos right but
16.83 -> underneath that it is made up of HTML
19.529 -> CSS and JavaScript code and inspect
22.56 -> element is a tool that lets the user
24.33 -> interact with those code now the
26.82 -> important question here is why should an
28.68 -> average user care about inspect element
30.869 -> now what I mean to say is it is
32.759 -> understandable if you're a web developer
34.26 -> and then you are using inspected event
36.66 -> but how would an average user would
38.64 -> benefit from it hem well if you know how
40.95 -> to use inspect element right you can do
42.84 -> pretty nifty stuff with it and we are
45.149 -> going to see five of them in this video
46.95 -> so without any further ado let's get
48.66 -> started now one good thing about
62.01 -> Internet is if you can see it then you
64.17 -> can download it now what I mean to say
66.15 -> is if you can see an image or a video
68.369 -> then you can probably download it on
70.29 -> your system even if the webmaster who
72.27 -> let you do that for example let's take
74.549 -> Twitter say I want to download the cover
77.25 -> image from this Twitter profile now like
80.04 -> always there is no direct option here so
82.68 -> what I will do is right click on the
84.36 -> cover image and then choose the inspect
86.4 -> element option you will see a new window
88.47 -> pop open from the bottom of the screen
90.81 -> go to the elements tab and then look for
93.27 -> the div that led images and there you
96.09 -> will find the surfer link of the image
97.729 -> simply copy paste it in a new tab and
100.5 -> there you see your download option
102.659 -> simple right similarly you can also use
105.96 -> this option to download videos where
107.85 -> there is no option to do it for example
110.31 -> let's take Instagram so as you know this
112.439 -> is an official way to download videos
114.18 -> for Instagram but you can easily do that
116.34 -> with
117.27 -> element option let me show you how right
119.61 -> click on the video that you want to
121.079 -> download and then select the inspect
123.09 -> element option like in previous case a
126.36 -> new window will pop open from the bottom
128.369 -> of the screen and in the element tab
130.53 -> move the cursors that the video gets
133.08 -> highlighted and then expand the div tag
135.51 -> and then we will find the download link
137.43 -> copy paste it in a new tab and there you
140.4 -> see the video in full resolution now all
143.4 -> you have to do is right click on it and
145.05 -> there is a download option right there
152.18 -> now this one is the most popular use of
154.83 -> inspect element and I'm pretty sure most
157.14 -> of you are already aware of this however
159.569 -> this click is so useful that is worth
161.489 -> mentioning once again so let's say you
163.89 -> want to to log in to Amazon mobile app
166.2 -> but you don't remember the password but
169.17 -> thankfully it is saved on your browser
171.06 -> password manager now all do the browser
173.7 -> hide the password in dots you can see
176.099 -> easily review it using the inspect
177.81 -> element simply right click on the
179.94 -> password field and select inspect
181.53 -> element scroll the point until you see
183.84 -> the parcel fee highlighted and then open
186.6 -> the div tag and under input type replace
189.09 -> the password with text now click on the
191.489 -> webpage and your password is visible in
193.829 -> plain text pretty cool right now on a
198.81 -> related note if you are using goon then
200.94 -> you can also go to password google.com
203.22 -> from any device sign in with your Google
205.859 -> account and there you will see all these
207.39 -> safe password yeah Google knows a lot
210.12 -> about you
217.58 -> now I have nothing against pay for the
220.35 -> high quality content it is a good way to
222.6 -> support the author however sometimes
225.09 -> things may get a little overboard for
227.49 -> example let's take this article on
229.26 -> Financial Times
230.66 -> unfortunately it's said in handy payable
233.209 -> now if we're holding on to read one
235.41 -> article then it don't make any sense to
237.42 -> pay for entire month right so here is
240.06 -> what you can do right click and select
242.52 -> inspect element now go to the element
245.01 -> tab and click on the cursor icon and
247.05 -> then place the cursor on the power box
249.39 -> now then go to the inspect element and
252 -> delete the highlighted part and that
253.95 -> said but wait we still see more content
257.82 -> so why is that well this is because
260.579 -> bigger websites are smart enough to not
263.1 -> render or the content inside the web
265.08 -> page but most websites on the internet
267.6 -> that are using this pop up are not that
269.85 -> smart and don't have the resources like
271.89 -> Financial Times so this trick will also
274.41 -> work there for instance you might have
276.63 -> seen pages like these where writer asked
279.12 -> negotiate the article if you want to
280.95 -> read the complete post while in such
283.2 -> cases you can simply use this trick
284.94 -> simply right click on it select the
286.89 -> pop-up and delete it now in some cases
289.02 -> there are also transparent layer which
291.51 -> will avoid you to make any plagues so
293.91 -> highlight that and delete it and there
296.55 -> we go you have the content right in
298.56 -> front of you
305.11 -> now there is a practical use of this
307.659 -> trick other than pranking your friends
309.52 -> but it can also show you why you should
312.19 -> not trust any screenshot you find on the
314.259 -> Internet
314.83 -> for example let's say I want to edit
316.75 -> this Wikipedia page so all I have to do
319.75 -> is open developer tool then go to
321.759 -> console and paste out of a command I
323.919 -> will also add it in the description of
325.599 -> this video
327.569 -> now close the window and you can write
330.039 -> anything you want here you can even
331.9 -> replace the images and video so as you
334.36 -> can see this is the reason why you
335.979 -> should not blindly trust any screenshot
338.199 -> you see on the Internet
339.46 -> I know good number of people who use
341.289 -> this trick to modify their results
343.03 -> appending in the University websites now
353.59 -> the previous trick only apply to the
355.389 -> webpage that you see on the screen the
357.31 -> moment you refresh your page the changes
359.319 -> will be gone however there is one
361.75 -> practical implementation of this trick
363.699 -> let me show you how so let's say I am
367.12 -> writing a post on WordPress and I have
369.61 -> made this same spelling mistake in the
371.62 -> entire post now this is just an example
373.84 -> in your case it could be an email that
376.449 -> you're typing now manually editing these
378.849 -> is not an option yes I can copy paste a
381.699 -> document in some word processor and then
383.8 -> use the Find and Replace option but then
386.259 -> it will mess up my formatting and this
389.59 -> is where this inspect element console
391.87 -> comes into picture simply open the
394.12 -> inspect element find the dividing of the
396.37 -> text will you want to apply the find and
398.379 -> replace function once you get it copy it
401.11 -> in your clipboard now go to the console
403.27 -> tab and type default income and I will
405.58 -> leave it in the description of this
406.87 -> video as well now here replace that
409.12 -> divided with the
410.439 -> that you have copied and replace the
412.479 -> before and after text with the text that
414.339 -> you want to replace one star in tanta
417.61 -> and as you can see all the words are
419.919 -> replaced now since most editor have
422.439 -> autosave feature it will automatically
424.569 -> save this to the server as well by the
426.879 -> way this is also one common way how
428.679 -> hackers penetrate the server so that's
432.999 -> it for now if you have learned something
434.529 -> new today then give this video a thumbs
436.599 -> up also if you have a video request let
439.269 -> me know in the comment section below and
440.889 -> yes if you haven't already noticed I
443.139 -> have a new schedule running on the disk
445.569 -> I will be publishing new videos on every
447.369 -> two same Saturday so if you haven't
450.249 -> already subscribed to this channel
451.449 -> please do it now so until next time this
454.059 -> is Pinal signing off and like always
455.919 -> thanks for watching
Source: https://www.youtube.com/watch?v=vi1mUy-nXFo