ওয়েবপেজের উত্পন্ন উত্স দেখার সেরা উপায়?

Question 1

আমি এমন একটি সরঞ্জাম খুঁজছি যা আমাকে ডাব্লু 3 এর বৈধকরণকারীর ইনপুট জন্য আজেএক্স অনুরোধ করে ডম পরিবর্তনগুলি সহ সঠিক উত্পন্ন উত্স প্রদান করবে। আমি নিম্নলিখিত পদ্ধতিগুলি চেষ্টা করেছি:

ওয়েব বিকাশকারী সরঞ্জামদণ্ড - ডক-টাইপ অনুসারে অবৈধ উত্স উত্পন্ন করে (উদাহরণস্বরূপ এটি ট্যাগের স্বতঃসংশ্লিষ্ট অংশটি সরিয়ে দেয়)। পৃষ্ঠার ডক্টাইপ অংশটি হারাবে।
ফায়ারব্যাগ - উত্সের সম্ভাব্য ত্রুটিগুলি সমাধান করে (উদাঃবিহীন ট্যাগগুলি)। এছাড়াও ট্যাগগুলির ডক্টাইপ অংশ হারায় এবং কনসোলটি ইনজেক্ট করে যা নিজেই অবৈধ এইচটিএমএল।
IE বিকাশকারী সরঞ্জামদণ্ড - ডক-টাইপ অনুসারে অবৈধ উত্স উত্পন্ন করে (যেমন এটি এক্সএইচটিএমএল স্পেসের বিপরীতে সমস্ত ট্যাগকে বড় বড় করে তোলে)।
হাইলাইট + দেখুন নির্বাচনের উত্স - প্রায়শই পুরো পৃষ্ঠাটি পাওয়া কঠিন, এছাড়াও ডক-টাইপকে বাদ দেয়।

সেখানে কোনও প্রোগ্রাম আছে বা অ্যাড-অন আছে যা আমাকে কোনওভাবে সংশোধন বা পরিবর্তন না করে উত্সের সঠিক বর্তমান সংস্করণটি দেবে? এখনও অবধি ফায়ারব্যাগটি সেরা বলে মনে হচ্ছে তবে আমি আশঙ্কা করি এটি আমার কিছু ভুল সংশোধন করতে পারে।

সমাধান

জাস্টিনের ব্যাখ্যা অনুসারে আমি যা চেয়েছিলাম তার সঠিক কোনও সমাধান নেই বলে দেখা গেছে। ফায়ারব্যাগের কনসোলের অভ্যন্তরীণ উত্সটি যাচাই করা সবচেয়ে ভাল সমাধান বলে মনে হচ্ছে, যদিও এতে ফায়ারব্যাগের কারণে কিছু ত্রুটি থাকবে। "উত্পন্ন উত্স দেখুন" কেন আসল উত্সটির সাথে মেলে না তা ব্যাখ্যা করার জন্য আমি ভুলে যাওয়া সেমিকোলনকে ধন্যবাদ জানাতে চাই। আমি যদি 2 টি সেরা উত্তর চিহ্নিত করতে পারি, আমি চাই।

Question 2

[সম্পাদিত প্রশ্নের আরও তথ্যের জবাবে আপডেট করা]

আপনি যে সমস্যাটি চালাচ্ছেন তা হ'ল একবার একবার পৃষ্ঠার এজ্যাক্স অনুরোধের মাধ্যমে সংশোধন করা হলে, বর্তমান এইচটিএমএল কেবল ব্রাউজারের ডম-এর অভ্যন্তরে উপস্থিত থাকে - এমন কোনও স্বাধীন উত্স এইচটিএমএল নেই যা আপনি যেটি বাইরে বের করতে পারবেন তার চেয়ে অন্য যাচাই করতে পারবেন can ডোম

যেমন আপনি পর্যবেক্ষণ করেছেন, আইআই এর ডিওএম আপার ক্ষেত্রে ট্যাগগুলি সঞ্চয় করে, অনাবৃত ট্যাগগুলি ঠিক করে দেয় এবং মূলত এটি প্রাপ্ত এইচটিএমএলে প্রচুর অন্যান্য পরিবর্তন করে। এর কারণ ব্রাউজারগুলি সাধারণত HTML (সমস্যাবিহীন ট্যাগগুলি) নিয়ে HTML ব্যবহার করতে এবং ব্যবহারকারীর জন্য দরকারী কিছু প্রদর্শন করার জন্য এই সমস্যাগুলি ঠিক করতে খুব ভাল। এইচটিএমএল একবার আইই দ্বারা ক্যানোনিকালাইজেশন হয়ে গেলে, মূল উত্স এইচটিএমএল মূলত ডম এর দৃষ্টিকোণ থেকে হারিয়ে গেছে, যতদূর আমি জানি।

ফায়ারফক্স বেশিরভাগ লাইকলে এই পরিবর্তনগুলি কম করে, সুতরাং ফায়ারব্যাগ সম্ভবত আপনার আরও ভাল বাজি।

একটি চূড়ান্ত (এবং আরও শ্রম-নিবিড়) বিকল্পটি সহজ এজাক্স পরিবর্তিত পৃষ্ঠাগুলির জন্য কাজ করতে পারে, যেমন সার্ভার থেকে কিছু এইচটিএমএল আনতে এবং এটি কোনও নির্দিষ্ট উপাদানের ভিতরে থাকা পৃষ্ঠায় আমদানি করে। সেক্ষেত্রে আপনি অ্যাজাক্স এইচটিএমএল দিয়ে ম্যানুয়ালি মূল এইচটিএমএল সেলাই করতে ফিজার বা অনুরূপ সরঞ্জাম ব্যবহার করতে পারেন। এটি সম্ভবত এটির চেয়ে বেশি সমস্যা, এবং এটির প্রবণতা, তবে এটি আরও একটি সম্ভাবনা।

[মূল প্রশ্নের এখানে আসল প্রতিক্রিয়া]

ফিডলার ( http://www.fiddlertool.com/ ) একটি নিখরচায়, ব্রাউজার-স্বতন্ত্র সরঞ্জাম যা কোনও ব্রাউজারের দ্বারা প্রাপ্ত সঠিক এইচটিএমএল আনতে খুব ভাল কাজ করে। এটি আপনাকে তারের ঠিক বাইটগুলি পাশাপাশি ডিকোডড / আনজিপড / ইত্যাদি সামগ্রী দেখায় যা আপনি যে কোনও HTML বিশ্লেষণ সরঞ্জামটিতে খাওয়াতে পারবেন। এটি শিরোনাম, সময়, এইচটিটিপি স্থিতি এবং প্রচুর অন্যান্য ভাল স্টাফ প্রদর্শন করে।

আপনি কোনও সার্ভারের সামান্য ভিন্ন শিরোনামকে কীভাবে প্রতিক্রিয়া জানায় তা পরীক্ষা করতে চাইলে অনুরোধগুলি অনুলিপি এবং পুনর্নির্মাণের জন্য আপনি ফিডলারও ব্যবহার করতে পারেন।

ফিডলার আপনার ব্রাউজার এবং ওয়েবসাইটের মধ্যে বসে প্রক্সি সার্ভার হিসাবে কাজ করে এবং ট্রাফিক উভয় পথে লগ করে।

Question 3

জাস্টিন মারা গেছে। এখানে মূল বক্তব্য হ'ল এইচটিএমএল একটি নথির বর্ণনা দেওয়ার জন্য কেবল একটি ভাষা। ব্রাউজারটি একবার পড়লে তা শেষ হয়ে যায় । ওপেন ট্যাগ, বন্ধ ট্যাগ এবং ফর্ম্যাটিং সমস্ত পার্সার দ্বারা যত্ন নেওয়া হয় এবং তারপরে চলে যায় । যে কোনও সরঞ্জাম যা আপনাকে এইচটিএমএল দেখায় তা নথির সামগ্রীর উপর ভিত্তি করে এটি উত্পন্ন করছে , তাই এটি সর্বদা বৈধ থাকবে।

আমাকে এটি অন্য ওয়েব বিকাশকারীকে একবার ব্যাখ্যা করতে হয়েছিল, এবং এটি এটি গ্রহণ করতে কিছুটা সময় নিয়েছিল।

যে কোনও জাভাস্ক্রিপ্ট কনসোলে আপনি নিজের জন্য এটি চেষ্টা করতে পারেন:

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

অ-বদ্ধ ট্যাগ এবং বড় হাতের ট্যাগগুলির নামগুলি চলে গেছে, কারণ এই HTML টি দ্বিতীয় লাইনের পরে পার্স এবং বাতিল করা হয়েছিল।

জাভাস্ক্রিপ্ট থেকে দস্তাবেজ সংশোধন করার সঠিক উপায় সাথে আছেন documentপদ্ধতি ( createElement, appendChild, setAttribute, ইত্যাদি) এবং আপনি মান্য করব যারা ফাংশন কোন ট্যাগ বা HTML সিনট্যাক্স কোন রেফারেন্স আছে যে। আপনি ব্যবহার করেন, তাহলে document.write, innerHTMLবা অন্যান্য এইচটিএমএল-ভাষী কল আপনার পৃষ্ঠাগুলি সংশোধন করার একমাত্র উপায় এটা ধরতে আপনি তাদের মধ্যে নির্বাণ এবং যাচাই করুন করছি যে এইচটিএমএল আলাদাভাবে হয় যাচাই করতে।

এটি বলেছিল, ডকুমেন্টের এইচটিএমএল উপস্থাপনাটি পাওয়ার সহজতম উপায় হ'ল:

document.documentElement.innerHTML

Question 4

আমি জানি এটি একটি পুরানো পোস্ট, তবে আমি সোনার এই টুকরোটি পেয়েছি । এটি পুরানো (2006), তবে এখনও আই 9 এর সাথে কাজ করে। আমি ব্যক্তিগতভাবে এটির সাথে একটি বুকমার্ক যুক্ত করেছি।

আপনার ব্রাউজারের ঠিকানা বারে এটি কেবল অনুলিপি করুন:

javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))

ফায়ারফক্স হিসাবে, ওয়েব বিকাশকারী সরঞ্জাম বার কাজ করে। আমি সাধারণত এটি ব্যবহার করি তবে কখনও কখনও, কিছু নোংরা তৃতীয় পক্ষের এসপ নেটওয়্যার ব্যবহারকারী এজেন্টের উপর ভিত্তি করে বিভিন্ন মার্কআপগুলি উত্পন্ন করে ...

সম্পাদনা

ব্রায়ান মন্তব্যে যেমন উল্লেখ করেছেন, কিছু বার ব্রাউজার javascript:ইউআরএল বারে কপি / পেস্ট করার সময় অংশটি সরিয়ে দেয় । আমি কেবল পরীক্ষা করেছি এবং এটি আই 10 এর ক্ষেত্রে।

Question 5

আপনি যদি Chrome এ দস্তাবেজটি লোড করেন তবে Developer|Elementsভিউটি আপনাকে আপনার জেএস কোড দ্বারা বিভক্ত হিসাবে HTML প্রদর্শন করবে। এটি সরাসরি এইচটিএমএল পাঠ্য নয় এবং আপনাকে আগ্রহের যে কোনও উপাদান খোলার (উদ্ঘাটন) করতে হবে, তবে আপনি কার্যকরভাবে উত্পন্ন এইচটিএমএল পরিদর্শন করতে পারেন।

Question 6

ওয়েব বিকাশকারী সরঞ্জামদণ্ডে, আপনি চেষ্টা করেছেন Tools -> Validate HTMLবা Tools -> Validate Local HTMLবিকল্পগুলি?

Validate HTMLবিকল্প যাচাইকারী, যা প্রকাশ্যে মুখোমুখি সাইটের সঙ্গে ভাল কাজ করে করতে URL পাঠায়। Validate Local HTMLবিকল্প যাচাইকারী, যা একটি লগইন পিছনে পৃষ্ঠা বা ঐ যে সর্বসাধারণের জন্য অ্যাক্সেসযোগ্য না সঙ্গে ভাল কাজ করে বর্তমান পৃষ্ঠার এইচটিএমএল পাঠায়।

আপনি উত্স চার্ট ( ফায়ারফক্স অ্যাড-অন হিসাবেও ) দেখতে চেষ্টা করতে পারেন । একটি আকর্ষণীয় নোট সেখানে:

প্র: কেন সোর্স চার্ট আমার এক্সএইচটিএমএল ট্যাগগুলিকে এইচটিএমএল ট্যাগগুলিতে পরিবর্তন করে?

উ: তা হয় না। ব্রাউজারটি এই পরিবর্তনগুলি করছে, ভিএসসি কেবল আপনার কোড দিয়ে ব্রাউজারটি যা করেছে তা প্রদর্শন করে। সর্বাধিক প্রচলিত: স্ব-সমাপ্তি ট্যাগগুলি তাদের বন্ধ হওয়া স্ল্যাশ (/) হারাবে। আরও তথ্যের জন্য রেন্ডার উত্স এ এই নিবন্ধটি দেখুন (সংরক্ষণাগার ..org) ।

Question 7

ফায়ারফক্স ওয়েব বিকাশকারী সরঞ্জামদণ্ড ব্যবহার করে ( https://addons.mozilla.org/en-US/firefox/addon/60 )

কেবল উত্স দেখুন -> উত্পন্ন উত্স দেখুন

আমি একেবারে একই জিনিসটির জন্য সমস্ত সময় ব্যবহার করি।

Question 8

আমারও একই সমস্যা ছিল এবং আমি এখানে একটি সমাধান খুঁজে পেয়েছি:

http://ubuntuincident.wordpress.com/2011/04/15/scraping-ajax-web-pages/

সুতরাং, ক্রোবার ব্যবহার করার জন্য, এখান থেকে সরঞ্জামটি:

http://simile.mit.edu/wiki/Crowbar (এখন (2015-12) 404s)
ওয়েব্যাক মেশিনের লিঙ্ক:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/ উইকি / ক্রোবার

এটি আমাকে ত্রুটিযুক্ত, অবৈধ এইচটিএমএল দিয়েছে।

Question 9

এটি একটি পুরানো প্রশ্ন, এবং এখানে একটি পুরানো উত্তর যা একবার আমার ~~জন্য বহু বছর ধরে~~ ত্রুটিহীনভাবে কাজ ~~করেছে~~ , তবে কমপক্ষে জানুয়ারী 2016 এর মতো নয়, এর বেশি আর কিছু নেই:

স্কয়ারফ্রি থেকে "উত্পন্ন উত্স" বুকমার্কলেট আপনি যা চান ঠিক তেমন করে - এবং @ জননি 5 এর অন্যথায় সূক্ষ্ম "পুরানো সোনার" থেকে ভিন্ন, উত্স কোড হিসাবে প্রদর্শিত হয় (ব্রাউজার দ্বারা সাধারণত রেন্ডার করার চেয়ে কমপক্ষে গুগলের ক্ষেত্রে ম্যাকে ক্রোম):

https://www.squarefree.com/bookmarklets/webdevel.html# জেনারেটেড_সোর্স

দুর্ভাগ্যক্রমে, এটি @ জনি 5 এর "পুরানো সোনার" মতোই আচরণ করে: এটি আর সোর্স কোড হিসাবে প্রদর্শিত হবে না। দুঃখিত

Question 10

ফায়ারফক্সে, কেবলমাত্র সিটিআরএল-এ (স্ক্রিনের সমস্ত কিছুই নির্বাচন করুন) তারপরে "নির্বাচনের উত্স দেখুন" রাইট ক্লিক করুন। এটি জাভাস্ক্রিপ্ট দ্বারা ডিওমে যে কোনও পরিবর্তন করেছে capt

Question 11

সতর্কতা (ডকুমেন্ট.ডোকামেন্টএলমেন্ট.উটার এইচটিএমএল);

Question 12

এটি টাইপ না করেই কি urlbar?

javascript:alert(document.body.innerHTML)

Question 13

উপাদান ট্যাবে, এইচটিএমএল নোড> অনুলিপি> অনুলিপি উপাদানটি ডান ক্লিক করুন - তারপরে একটি সম্পাদকটিতে আটকান।

যেমন উপরে বর্ণিত হয়েছে, উত্সটি একবার ডিওএম ট্রিতে রূপান্তরিত হয়ে গেলে মূল উত্স ব্রাউজারে আর বিদ্যমান থাকে না। আপনার যে কোনও পরিবর্তনগুলি DOM এ হবে, উত্স নয়।

তবে, আপনি "উত্পন্ন উত্স" দেখার সুযোগ দিয়ে পরিবর্তিত ডোমটিকে আবার এইচটিএমএল-এ পার্স করতে পারেন।

Chrome এ বিকাশকারী সরঞ্জামগুলি খুলুন এবং উপাদান ট্যাবটি ক্লিক করুন।
এইচটিএমএল উপাদানটিতে রাইট ক্লিক করুন।
অনুলিপি> অনুলিপি উপাদান নির্বাচন করুন।
একটি সম্পাদক এ পেস্ট করুন।

আপনি এখন একটি HTML পৃষ্ঠা হিসাবে বর্তমান ডিওএম দেখতে পাচ্ছেন।

এটি সম্পূর্ণ ডোম নয়

নোট করুন যে কোনও ডকুমেন্ট দ্বারা ডিওএম পুরোপুরি উপস্থাপন করা যায় না। এটি কারণ এইচটিএমএল বৈশিষ্ট্যগুলির চেয়ে ডিওমের আরও অনেক বৈশিষ্ট্য রয়েছে। তবে এটি একটি যুক্তিসঙ্গত কাজ করবে।

Question 14

আমি মনে করি আইই ডি সরঞ্জামগুলি (এফ 12) রয়েছে; দেখুন> উত্স> ডোম (পৃষ্ঠা)

আপনাকে ডিওএম কে অনুলিপি করে আটকানো দরকার এবং যাচকের কাছে প্রেরণের জন্য এটি সংরক্ষণ করতে হবে।

Question 15

"রেন্ডার উত্স দেখুন" ক্রোম এক্সটেনশন দেখুন:

https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/

Question 16

কেবলমাত্র আমি খুঁজে পেয়েছি সাফারির জন্য বেটারসোর্স এক্সটেনশন এটি আপনাকে ডকুমেন্টের ম্যানিপুলেটেড উত্সটি দেখিয়ে দেবে কেবল ডাউনসাইড ফায়ারফক্সের মতো এটি দূরবর্তীভাবে কিছুই নয়

Question 17

নীচের জাভাস্ক্রিপ্ট কোড স্নিপেট আপনাকে সম্পূর্ণ এজ্যাক্স রেন্ডার করা এইচটিএমএল উত্পন্ন উত্স পাবেন। ব্রাউজারটি স্বাধীন। উপভোগ করুন :)

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one as lower versions of firefox
        //does not support element.outerHTML property
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
  }


 var outerhtml = outerHTML(document.getElementsByTagName('html')[0]);
var node = document.doctype;
var doctypestring="";
if(node)
{
     // IE8 and below does not have document.doctype and you will get null if you access it.

 doctypestring = "<!DOCTYPE "
         + node.name
         + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
         + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
         + (node.systemId ? ' "' + node.systemId + '"' : '')
         + '>';
         }
         else

         {

             // for IE8 and below you can access doctype like this

         doctypestring = document.all[0].text;
         }
doctypestring +outerhtml ;

Question 18

আমি কনসোলে এজাক্স কলের ফলাফলগুলি লগ করে একই ধরণের সমস্যা সমাধান করতে সক্ষম হয়েছি। এটি এইচটিএমএল ফিরে এসেছে এবং আমি এটির যে কোনও সমস্যা খুব সহজেই দেখতে পেতাম।

আমার অজ্যাক্স কল এর .done () ফাংশনে আমি কনসোল.লগ যুক্ত করেছি (ফলাফল) যাতে আমি ডিবাগার কনসোলে এইচটিএমএল দেখতে পারি।

function GetReversals() {
    $("#getReversalsLoadingButton").removeClass("d-none");
    $("#getReversalsButton").addClass("d-none");

    $.ajax({
        url: '/Home/LookupReversals',
        data: $("#LookupReversals").serialize(),
        type: 'Post',
        cache: false
    }).done(function (result) {
        $('#reversalResults').html(result);
        console.log(result);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        //alert("There was a problem getting results.  Please try again. " + jqXHR.responseText + " | " + jqXHR.statusText);
        $("#reversalResults").html("<div class='text-danger'>" + jqXHR.responseText + "</div>");
    }).always(function () {
        $("#getReversalsLoadingButton").addClass("d-none");
        $("#getReversalsButton").removeClass("d-none");
    });
}

স্নিপেট প্রসারিত করুন